How to Select a Radio Button in CSS

How do you select a radio button in css?

input[type="radio"] is an example of an attribute selector. It's part of the CSS3 spec and is perfectly legal. The only browser that doesn't support them is IE6. If supporting IE6 is important to the project, then you should look into adding classes to the radio buttons in question.

Here's an article with an example of how to effectively use attribute selectors. Check out this article for more info on CSS3 goodies.

CSS selector for a checked radio button's label

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>

CSS - How to Style a Selected Radio Buttons Label?

.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>

CSS select radiobutton of group before the check one

Thanks to @mpro I could figure out a way to get all my following Styles differentiated from the once before the checked element.

<input type="radio" name="attr_1" value="1">
<input type="radio" name="attr_1" value="2">
<input type="radio" name="attr_1" value="3">
<input type="radio" name="attr_1" value="4">
<input type="radio" name="attr_1" value="5">

input {
    background-color: red;
}
input:checked ~ input {
    background-color: black
}

this required me to have at least one Radiobutton selected, but i got that anyways. Thanks for all the help guys

How to select radio button by clicking its div?

Your labels are not surrounding the div contents. They are currently just empty labels (e.g, <label for="capsule"></label>), so obviously nothing is happening.

This should work:

<main class="subscription__container">
      <section
        id="preferences"
        class="subscription__container--preferences box"
      >
        <div class="question__container">
          <h3 class="question__container--title">
            How do you drink your coffee?
          </h3>
          <img
            class="question__container--img"
            src="../assets/plan/desktop/icon-arrow.svg"
            alt="arrow"
          />
        </div>
        <div class="options__container">
          <div class="options__container--option">
            <input
              id="capsule"
              type="radio"
              data-preference="Capsule"
              value="Capsule"
              name="preferences"
              checked
            />
            <label for="capsule">
            <h4 class="options__container--title">Capsule</h4>
            <p class="options__container--description">
              Compatible with Nespresso systems and similar brewers.
            </p></label>
          </div>
          <div class="options__container--option">
            <input
              id="filter"
              type="radio"
              data-preference="Filter"
              value="Filter"
              name="preferences"
            />
            <label for="filter">
            <h4 class="options__container--title">Filter</h4>
            <p class="options__container--description">
              For pour over or drip methods like Aeropress, Chemex, and V60.
            </p></label>
          </div>
          <div class="options__container--option">
            <input
              id="espresso"
              type="radio"
              data-preference="Espresso"
              value="Espresso"
              name="preferences"
            />
            <label for="espresso">
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p></label>
          </div>
        </div>
      </section>
</main>

How to style selected radio button

The CSS rule would be

input[type="radio"]:checked

Unsure what exactly what you want to do but if you were planning on doing some styling on the element which goes after each radio element in your question you'd use the following rule

input[type="radio"]:checked + span

CSS for a checked radio button's label

Since there is no previous selector in CSS, you will have to move the input element before label and use the adjacent sibling(+) selector to select the label when input is :checked.

input[type="radio"]:checked + label {
  background: #000;
}

---

Updated Fiddle

/* Clean up the lists styles */
ul.accordion {  list-style: none;  margin: 0;  padding: 0;}/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion input[type='radio'] {  display: none;}/* Give each content pane some styles */
ul.accordion li {  background-color: #fff;  border-bottom: 1px solid #DDDDDD;}/* Make the main tab look more clickable */
ul.accordion label {  background-color: #666666;  color: #FFFFFF;  display: block;  padding: 10px;  font-size: 16px;  font-weight: 700;}/* Set up the div that will show and hide */
ul.accordion div.content {  overflow: hidden;  padding: 0 20px;  display: none;}/* Show the content boxes when the radio buttons are checked */
ul.accordion input[type='radio']:checked + label + div.content {  display: block;}input[type="radio"]:checked + label {  background: #000;}body {  margin: 0;}

<ul class="accordion">  <li>    <input type="radio" name="a" id="q-1" checked="checked" />    <label for="q-1">Content 1</label>    <div class='content'>      <p>Content 1 blah blah blah blah</p>    </div>  </li>  <li>    <input type="radio" name="a" id="q-2" />    <label for="q-2">Content 2</label>    <div class='content'>      <p>Content 2 blah blah blah blah</p>    </div>  </li></ul>

how to select one radio button at a time

Radio Buttons are grouped by their name and differed by their value.

So you basically have to give all of them the same name but different values (example from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio):

<div>
  <input type="radio" id="huey" name="drone" value="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

---

Related Topics