Question 46064 in CSS Question posted in
Some basic documentation can be found here.

How to get label of checked inupt in css

How can I change the background-color of the label from a checked radio button.
Django renders form radio inputs like this:

<label for="id_form-level_0">
  <input type="radio" name="form-level" value="1" required="" id="id_form-level_0">
  description 
</label>

I dont have the intention to change this, so the most commun solution

input[type="radio"]:checked + label {
  background-color: red;
}

does not work. In addition the :has() selector seems not to be supported in the browsers, meaning the following code neither works.

label:has(input[type="radio"]:checked) {
  background-color: red;
}

What is the correct way to adress the right label in css?

Tags:

2

Answers


  1. 0

    if input checked, make inputs background red,

    input[type="checkbox"]:checked {
background:red;}

    if inputs checked, make sibling labels background red. (label should come later than input )

    input[type="checkbox"]:checked + label {
  background-color: red;
}
    Login or Signup to reply.
  2. 0

    Yes, :has pseudoclass dont work proper in FireFox (https://caniuse.com/css-has).
    This is impossible to select parent element in CSS.
    It is unfortunate because you use label element as parent to input.

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

Back To Top
Search