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

If you really want to put the checkboxes inside the label, try adding an extra span tag, eg.

HTML

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked><span>All</span></label>
 <label><input type="radio" value="false"><span>Open</span></label>
 <label><input type="radio" value="true"><span>Archived</span></label>
</div>

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

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

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

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

You can add a span to your html and css    Here s an example from my code        HTML   JSX      lt input type  radio  name  AMPM  id  radiostyle1  value  AM  checked  this state AMPM    AM   onChange  this handleChange   gt     lt label for  radiostyle1  gt  lt span gt  lt  span gt  am   lt  label gt    lt input type  radio  name  AMPM  id  radiostyle2  value  PM  checked  this state AMPM    PM   onChange  this handleChange   gt   lt label for  radiostyle2  gt  lt span gt  lt  span gt  pm   lt  label gt    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

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

Examples related to html

Examples related to css