CSS selector for a checked radio button s label

Question

Is it possible to apply a css 3  style to a label of a checked radio button   I have the following markup    lt input type  radio  id  rad  name  radio   gt   lt label for  rad  gt A Label lt  label gt    What I was hoping is that   label checked   font-weight  bold      would do something  but alas it does not  as I expected    Is there a selector that can achieve this sort of functionality   You may surround with divs etc if that helps  but the best solution would be one that uses the label   for   attribute   It should be noted that I am able to specify browsers for my application  so best of class css3 etc please

User · Answer

If your input is a child element of the label and you have more than one labels, you can combine @Mike's trick with Flexbox + order.

_x000D_

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }



/* style the switch */

:root {
  --radio-size: 14px;
}

.switchLabel input.switch  {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  border: 1px solid #999999;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: inherit;
  -moz-appearance: inherit;
  appearance: inherit;
  
  box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}

.switchLabel input.switch:checked {
  box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}

_x000D_

<label class="switchLabel">
  <input type="checkbox" class="switch" />
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

_x000D_

_x000D_ asd

html

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

css

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

See it on JSFiddle.

note: Sibling selector only works within the same parent. To work around this, you can make the input hidden at top-level using @Nathan Blair hack.

User · Answer

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    lt input id  rad1  type  radio  name  rad   gt  lt label for  rad1  gt Radio 1 lt  label gt   lt input id  rad2  type  radio  name  rad   gt  lt label for  rad2  gt Radio 2 lt  label gt        and it will work for any structure  with or without divs etc as long as the label follows the radio input   Example    x000D   x000D  input type  radio   checked label   font-weight  bold    x000D   lt input id  rad1  type  radio  name  rad   gt  lt label for  rad1  gt Radio 1 lt  label gt  x000D   lt input id  rad2  type  radio  name  rad   gt  lt label for  rad2  gt Radio 2 lt  label gt  x000D   x000D   x000D

User · Answer

I forget where I first saw it mentioned but you can actually embed your labels in a container elsewhere as long as you have the for  attribute set  So  let s check out a sample on SO    x000D   x000D      x000D    padding  0  x000D    margin  0  x000D    background-color   262626  x000D    color  white  x000D    x000D   x000D   radio-button   x000D    display  none  x000D    x000D   x000D   filter   x000D    display  flex  x000D    justify-content  center  x000D    x000D   x000D   filter-label   x000D    display  inline-block  x000D    border  4px solid green  x000D    padding  10px 20px  x000D    font-size  1 4em  x000D    text-align  center  x000D    cursor  pointer  x000D    x000D   x000D  main   x000D    clear  left  x000D    x000D   x000D   content   x000D    padding  3  10   x000D    display  none  x000D    x000D   x000D  h1   x000D    font-size  2em  x000D    x000D   x000D   date   x000D    padding  5px 30px  x000D    font-style  italic  x000D    x000D   x000D   filter-label hover   x000D    background-color   505050  x000D    x000D   x000D   featured-radio checked  filter  featured  x000D   personal-radio checked  filter  personal  x000D   tech-radio checked  filter  tech   x000D    background-color  green  x000D    x000D   x000D   featured-radio checked main  featured   x000D    display  block  x000D    x000D   x000D   personal-radio checked main  personal   x000D    display  block  x000D    x000D   x000D   tech-radio checked main  tech   x000D    display  block  x000D    x000D   lt input type  radio  id  featured-radio  class  radio-button  name  content-filter  checked  checked  gt  x000D   lt input type  radio  id  personal-radio  class  radio-button  name  content-filter  value  Personal  gt  x000D   lt input type  radio  id  tech-radio  class  radio-button  name  content-filter  value  Tech  gt  x000D   x000D   lt header id  filter  gt  x000D     lt label for  featured-radio  class  filter-label featured  id  feature-label  gt Featured lt  label gt  x000D     lt label for  personal-radio  class  filter-label personal  id  personal-label  gt Personal lt  label gt  x000D     lt label for  tech-radio  class  filter-label tech  id  tech-label  gt Tech lt  label gt  x000D   lt  header gt  x000D   x000D   lt main gt  x000D     lt article class  content featured tech  gt  x000D       lt header gt  x000D         lt h1 gt Cool Stuff lt  h1 gt  x000D         lt h3 class  date  gt Today lt  h3 gt  x000D       lt  header gt  x000D   x000D       lt p gt  x000D        I m showing cool stuff in this article  x000D       lt  p gt  x000D     lt  article gt  x000D   x000D     lt article class  content personal  gt  x000D       lt header gt  x000D         lt h1 gt Not As Cool lt  h1 gt  x000D         lt h3 class  date  gt Tuesday lt  h3 gt  x000D       lt  header gt  x000D   x000D       lt p gt  x000D        This stuff isn t nearly as cool for some reason     x000D       lt  p gt  x000D     lt  article gt  x000D   x000D     lt article class  content tech  gt  x000D       lt header gt  x000D         lt h1 gt Cool Tech Article lt  h1 gt  x000D         lt h3 class  date  gt Last Monday lt  h3 gt  x000D       lt  header gt  x000D   x000D       lt p gt  x000D        This article has awesome stuff all over it  x000D       lt  p gt  x000D     lt  article gt  x000D   x000D     lt article class  content featured personal  gt  x000D       lt header gt  x000D         lt h1 gt Cool Personal Article lt  h1 gt  x000D         lt h3 class  date  gt Two Fridays Ago lt  h3 gt  x000D       lt  header gt  x000D   x000D       lt p gt  x000D        This article talks about how I got a job at a cool startup because I rock  x000D       lt  p gt  x000D     lt  article gt  x000D   lt  main gt  x000D   x000D   x000D    Whew  That was a lot for a  sample  but I feel it really drives home the effect and point  we can certainly select a label for a checked input control without it being a sibling  The secret lies in keeping the input tags a child to only what they need to be  in this case - only the body element    Since the label element doesn t actually utilize the  checked pseudo selector  it doesn t matter that the labels are stored in the header  It does have the added benefit that since the header is a sibling element we can use the   generic sibling selector to move from the input type radio  checked DOM element to the header container and then use descendant child selectors to access the labels themselves  allowing the ability to style them when their respective radio boxes checkboxes are selected   Not only can we style the labels  but also style other content that may be descendants of a sibling container relative to all of the inputs  And now for the moment you ve all been waiting for  the JSFIDDLE  Go there  play with it  make it work for you  find out why it works  break it  do what you do   Hopefully that all makes sense and fully answers the question and possibly any follow ups that may crop up

User · Answer

You could use a bit of jQuery      input radio   click function           label       this  attr  id    toggleClass  checkedClass       checkedClass is defined in your CSS       You d need to make sure your checked radio buttons have the correct class on page load as well

User · Answer

I know this is an old question  but if you would like to have the  lt input gt  be a child of  lt label gt  instead of having them separate  here is a pure CSS way that you could accomplish it    checked   span   font-weight  bold      Then just wrap the text with a  lt span gt     lt label gt      lt input type  radio  name  test    gt      lt span gt Radio number one lt  span gt   lt  label gt    See it on JSFiddle

User · Answer

UPDATE   This only worked for me because our existing generated html was wacky  generating labels along with radios and giving them both checked attribute   Never mind  and big ups for Brilliand for bringing it up   If your label is a sibling of a checkbox  which is usually the case   you can use the   sibling selector  and a label for your checkbox id  to address it    or give the label an id if you have multiple labels  like in this example where I use labels for buttons     Came here looking for the same - but ended up finding my answer in the docs   a label element with checked attribute can be selected like so   label checked              I know it s an old question  but maybe it helps someone out there

[forms] CSS selector for a checked radio button's label

Examples related to forms

Examples related to css