CSS - How to Style a Selected Radio Buttons Label

Question

I want to add a style to a radio button s selected label   HTML    lt div class  radio-toolbar  gt    lt label gt  lt input type  radio  value  all  checked gt All lt  label gt    lt label gt  lt input type  radio  value  false  gt Open lt  label gt    lt label gt  lt input type  radio  value  true  gt Archived lt  label gt   lt  div gt    CSS   radio-toolbar input type  radio    display none    radio-toolbar label       background Red      border 1px solid green      padding 2px 10px     radio-toolbar label   input type  radio   checked        background pink  important      Any ideas what I m doing wrong

User · Answer

You can add a span to your html and css .

Here's an example from my code ...

HTML ( JSX ):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>  
<label for="radiostyle1"><span></span> am  </label>

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm  </label>

CSS to make standard radio button vanish on screen and superimpose custom button image:

input[type="radio"] {  
    opacity:0;                                      
}

input[type="radio"] + label {
    font-size:1em;
    text-transform: uppercase;
    color: white ;  
    cursor: pointer;
    margin:auto 15px auto auto;                    
}

input[type="radio"] + label span {
    display:inline-block;
    width:30px;
    height:10px;
    margin:1px 0px 0 -30px;                       
    cursor:pointer;
    border-radius: 20%;
}


input[type="radio"] + label span {
    background-color: #FFFFFF 
}


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

User · Answer

As there is currently no CSS solution to style a parent  I use a simple jQuery one here to add a class to a label with checked input inside it     document  on  change   input   function        label   removeClass  checkedlabel     if   this  is   checked      this  closest  label   addClass  checkedlabel          Don t forget to give the pre-checked input s label the class checkedlabel too

User · Answer

Here s an accessible solution   x000D   x000D  label   x000D    position  relative  x000D    x000D   x000D  label input   x000D    position  absolute  x000D    opacity  0  x000D    x000D   x000D  label focus-within   x000D    outline  1px solid orange  x000D    x000D   lt div class  radio-toolbar  gt  x000D     lt label gt  lt input type  radio  value  all  checked gt All lt  label gt  x000D     lt label gt  lt input type  radio  value  false  gt Open lt  label gt  x000D     lt label gt  lt input type  radio  value  true  gt Archived lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you really want to put the checkboxes inside the label  try adding an extra span tag  eg   HTML   lt div class  radio-toolbar  gt    lt label gt  lt input type  radio  value  all  checked gt  lt span gt All lt  span gt  lt  label gt    lt label gt  lt input type  radio  value  false  gt  lt span gt Open lt  span gt  lt  label gt    lt label gt  lt input type  radio  value  true  gt  lt span gt Archived lt  span gt  lt  label gt   lt  div gt    CSS   radio-toolbar input type  radio   checked            background pink  important      That will set the backgrounds for all siblings of the selected radio button

User · Answer

You are using an adjacent sibling selector     when the elements are not siblings  The label is the parent of the input  not it s sibling    CSS has no way to select an element based on it s descendents  nor anything that follows it    You ll need to look to JavaScript to solve this   Alternatively  rearrange your markup    lt input id  foo  gt  lt label for  foo  gt     lt  label gt

User · Answer

x000D   x000D   radio-toolbar input type  radio     x000D    display  none  x000D    x000D   x000D   radio-toolbar label   x000D    display  inline-block  x000D    background-color   ddd  x000D    padding  4px 11px  x000D    font-family  Arial  x000D    font-size  16px  x000D    cursor  pointer  x000D    x000D   x000D   radio-toolbar input type  radio   checked label   x000D    background-color   bbb  x000D    x000D   lt div class  radio-toolbar  gt  x000D     lt input type  radio  id  radio1  name  radios  value  all  checked gt  x000D     lt label for  radio1  gt All lt  label gt  x000D   x000D     lt input type  radio  id  radio2  name  radios  value  false  gt  x000D     lt label for  radio2  gt Open lt  label gt  x000D   x000D     lt input type  radio  id  radio3  name  radios  value  true  gt  x000D     lt label for  radio3  gt Archived lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    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

[html] CSS - How to Style a Selected Radio Buttons Label?

Examples related to html

Examples related to css