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

Styling Contact Form 7 checkbox when checked – WordPress

I want to change out the visual of the checked checkbox from blue background to match my theme. I cant seem to get it to show and have tried several options for the checked status. Any help for what selector to use on this would be very helpful.

Selectors that didn’t work out.

.wpcf7-list-item > label:after > input[type=checkbox]:checked + span {}
.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:after {}
span.wpcf7-list-item.first > input[type=checkbox]:checked {}
input[type="checkbox"]:checked {}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found out through the post from Victory Osiobe that you can use this to affect the contact form 7 checkboxes color when selected.

    .wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked {
  accent-color: green;
}

    Confirmed working when inserted to Appearance>Additional CSS


  2. 0

    I think you should visit: https://www.geeksforgeeks.org/how-to-style-a-checkbox-using-css/?

    For changing the color of the checkbox

    If what you find is too complex, you could simply use:

    input[type=checkbox] {
  accent-color: red; /*Change red to any color you want*/
}

    The input finds all the input tags, the stuff in the square brackets find the type. You know it could be type date, type color, type text…
    Then the accent-color changes the color of the input of type checkbox.

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

Back To Top
Search