CSS – How to Style a Selected Radio Buttons Label?

by 
.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}
<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>

First of all, you probably want to add the name attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.

Also, since I placed the labels as siblings (of the radio buttons), I had to use the id and for attributes to associate them together.

More Related Contents:

  1. change the menu font size
  2. Can I debug by CSS code in easy way for beginner?
  3. How to write a:hover in inline CSS?
  4. Landscape printing from HTML
  5. Use images instead of radio buttons
  6. Changing image on hover with CSS/HTML
  7. How to target a specific column or row in CSS Grid Layout?
  8. CSS :selected pseudo class similar to :checked, but for elements
  9. Get second line of bullet item to indent as first part – not underneath the bullet?
  10. Best practices for styling HTML emails [closed]
  11. How to style a checkbox using CSS
  12. How is Github Changing Pages and the URL so smoothly without AJAX?
  13. Font Awesome icon inside text input element
  14. Custom bullet symbol for elements in that is a regular character, and not an image
  15. How do I add a “search” button in a text input field?
  16. heading with horizontal line on either side [duplicate]
  17. Fill remaining vertical space – only CSS
  18. CSS Background image not loading
  19. Change checkbox check image to custom image
  20. How to add background image for input type=”button”?
  21. Flexbox, z-index & position: static: Why isn’t it working?
  22. What are the CSS properties that get elements out of the normal flow?
  23. How to completely remove borders from HTML table
  24. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  25. Internet Explorer and clip-path
  26. Floating Div Over An Image
  27. How can I make Bootstrap 4 columns all the same height? [duplicate]
  28. Changing image src depending on screen size
  29. Balanced text wrapping in HTML
  30. How to center-justify the last line of text in CSS?

Leave a Comment