Changing the entire background of the checked checkbox

Get Help
,
1

Hi all,

I easily added the :hover pseudo class to the checkbox to change the background color to a bright green but now I want that background color to stay there once you tick the box but can’t get it to work at all.

Kindly see this link to see what i’m doing.

Thank you!

2

Hi @cultithrive
To keep the background color of a checkbox when it is checked, you can use the :checked pseudo-class in combination with the + adjacent sibling combinator. The + combinator selects the element immediately preceded by the former element.

Here is an example of how you can use these pseudo-classes and combinators to achieve the desired effect:

input[type="checkbox"] + label:hover {
  background-color: #00FF00; /* bright green */
}

input[type="checkbox"]:checked + label {
  background-color: #00FF00; /* bright green */
}

This will apply the bright green background color to the label element when the checkbox is hovered over or checked.

You can also use the :before pseudo-element to style the checkbox itself:

input[type="checkbox"]:checked + label:before {
  background-color: #00FF00; /* bright green */
}

This will apply the bright green background color to the checkbox itself when it is checked.

I hope this helps! Let me know if you have any questions.

1 Like
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.