Question 2896 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Change color of checkbox input in HTML/PHP – WordPress

I am fairly new to programming websites so this might be a stupid question, but I can’t seem to change the color of a checkbox I have where user should accept privacy policy. The code is placed in a .PHP file.

Code

Here is what I have now:

<label class="custom-control custom-checkbox mb-0">
      <input type="checkbox" class="custom-control-input" id="privacypolicy" value="1" tabindex="20"  onchange="jQuery('#privacypolicy').prop('disabled', false);" data-fieldblock="block<?php echo $i; ?>">
      <div class="custom-control-label mr-2"> <?php echo __("Accept","premiumpress") ?> <a href="www.site.com/privacypolicy" target="_blank"><?php echo __("<b>Privacy policy</b>","pp") ?></a> </div>
</label>

What I tried

I have been Googling for ages now and all I find is people saying to add CSS. But where would I do this? I can’t just add it in html/php file, when I tried it of course didn’t recognize it as code. I don’t want to change some style CSS since I only want to change background color on this specific place. I can’t seem to add an attribute to my like background-color="000000" either.

What I want

Just change background color of checkbox on this specific place. I don’t know if the code provided is enough, please let me know in comments if you need any more details.

Tags:

2

Answers


  1. 0

    Try the accent-color property instead of background-color

    Full description here

    Login or Signup to reply.
  2. 0

    Though it is easier than it was in the past, adding custom styling to the browsers default input fields is not as easy as it might sound. In other words, changing the color of a checkbox seems like it should be super simple but in reality you have to use quite a bit of CSS styling. Here is a nice article that provides some examples of how to do it:
    https://css-tricks.com/custom-styling-form-inputs-with-modern-css-feature

    As @jaspal mentioned in his comment, you need to add css to the html output. Once you do, you can use the css styling rules in the article to target specific inputs and style them. If you are just trying to style checkboxes and not the other input types, this is a good primer: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search