CSS selector for a checked radio button’s label

by

try the + symbol:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

As such:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked

works very nicely for the following markup:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

… and it will work for any structure, with or without divs etc as long as the label follows the radio input.

Example:

input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

More Related Contents:

  1. How to collect and manipulate data in HTML using
  2. How to use in JSF page? Single form? Multiple forms? Nested forms?
  3. Is it a good practice to use an empty URL for a HTML form’s action attribute? (action=””)
  4. How to align checkboxes and their labels consistently cross-browsers
  5. Put icon inside input element in a form
  6. Is action really required on forms?
  7. Multiple forms in a single page using flask and WTForms
  8. Angular2 – Radio Button Binding
  9. Disabled form fields not submitting data [duplicate]
  10. Use a normal link to submit a form
  11. Nodejs POST request multipart/form-data
  12. Better Honeypot Implementation (Form Anti-Spam)
  13. How do you style the HTML5 form validation messages?
  14. Clear JSF form input values after submitting
  15. Manually Set Value for FormBuilder Control
  16. Angular: composite ControlValueAccessor to implement nested form
  17. How to make ‘submit’ button disabled?
  18. Styling Password Fields in CSS
  19. Can a ::before selector be used with a ?
  20. HTML5: Slider with two inputs possible?
  21. How can I conditionally require form inputs with AngularJS?
  22. Disable submit button when form invalid with AngularJS
  23. How to open a new window on form submit
  24. Firefox keeps form data on reload
  25. Symfony2 invalid form without errors
  26. Dynamically expand height of input type “text” based on number of characters typed into field
  27. Dynamic row height in a SwiftUI form
  28. Validate fields after user has left a field
  29. How can I control the height of an Option element in Webkit?
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment