Get radio button label to stay the same color once I've checked it

Question

I have a radio where the options change from grey to black when the user hovers over them. But I want the checked option to remain black, even after the user is no longer hovering over it. I can't get it to do this at all.

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <label><input class="star-buttons" type="radio" name="radio" value="1"> ☆ <br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="2"> ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="3"> ☆ ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="4"> ☆ ☆ ☆ ☆<br></label>
  <label><input class="star-buttons" type="radio" name="radio" value="5"> ☆ ☆ ☆ ☆ ☆<br></label>
</div>

I was trying to do something like in the last line of my CSS, but that's not working. How do I get this done?

`imput:checked + label` will match `` and not `` There is no parent's selector :( — G-Cyrillus, Mar 07 '19 at 19:34
`star-buttons` is an invalid HTML5 attribute. Use `data-star-button` instead or whatever you were trying to... Class or ID perhaps? — Roko C. Buljan, Mar 07 '19 at 19:39
@RokoC.Buljan I think that was just a stupid mistake on my part. I meant to say class="star-buttons". Sorry! — , Mar 07 '19 at 19:43

Joshua Robinson · Answer 1 · 2019-03-07T19:41:14.897

+ is a sibling selector and with this markup the label is a parent. There is no parent selector in CSS. However we can still get this done! Place a wrapper around the stars to leverage the sibling selector like so:

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .stars-txt {
  color: black;
}

<div>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="1">
    <div class="stars-txt">☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="2">
    <div class="stars-txt">☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="3">
    <div class="stars-txt">☆ ☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="4">
    <div class="stars-txt">☆ ☆ ☆ ☆</div>
  </label>
  <label>
    <input class="star-buttons" type="radio" name="radio" value="5">
    <div class="stars-txt">☆ ☆ ☆ ☆ ☆</div>
  </label>
</div>

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

you should set your input outside and before label so the selector input[type="radio"]:checked+label will match your HTML

as commented earlier imput:checked + label will match <input><label></label> and not <label><input></label> There is no parent's selector :(

See :

Is there a best practice concerning the nesting of label and input HTML elements? Should I put input elements inside a label element?

and

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The HTML element represents a caption for an item in a user interface.

Associating a with an element offers some major advantages:

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

update possible of your HTML

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <input class="star-buttons" type="radio" name="radio" value="1" id="a"><label for="a"> ☆ <br></label>
  <input class="star-buttons" type="radio" name="radio" value="2" id="b"><label for="b"> ☆ ☆<br></label>
  <input class="star-buttons" type="radio" name="radio" value="3" id="c"><label for="c"> ☆ ☆ ☆<br></label>
  <input class="star-buttons" type="radio" name="radio" value="4"id ="d"><label for="d"> ☆ ☆ ☆ ☆<br></label>
  <input class="star-buttons" type="radio" name="radio" value="5" id="e"><label for="e"> ☆ ☆ ☆ ☆ ☆<br></label>
</div>

score 1 · Answer 3 · answered Mar 07 '19 at 19:39

1

Wrap your star characters inside a <span> like so:

<label>
     <input class="star-buttons" type="radio" name="radio" value="1">
     <span>☆</span>
</label>

Then in your CSS, change this:

input[type="radio"]:checked + label {
  color: black;
}

To this:

input[type="radio"]:checked + span {
  color: black;
}

answered Mar 07 '19 at 19:39

jstarnate

319
3
15

Perfect! Exactly what I needed – Mar 07 '19 at 19:45
If you find this helpful, an upvote would be appreciated – jstarnate Mar 07 '19 at 19:47

score 0 · Answer 4 · answered Mar 07 '19 at 20:02

In the case when you want to see those stars filled with color this is how I would do it: Instead of using the stars in HTML I'm using the stars in CSS and I'm changing between \02729 (empty star) and \0272d (filled star).

label:nth-of-type(1)::before{content:'\02729'}
label:nth-of-type(2)::before{content:'\02729\02729'}
label:nth-of-type(3)::before{content:'\02729\02729\02729'}
label:nth-of-type(4)::before{content:'\02729\02729\02729\02729'}
label:nth-of-type(5)::before{content:'\02729\02729\02729\02729\02729'}



input[type="radio"]:checked + label:nth-of-type(1)::before{content:'\0272d'}
input[type="radio"]:checked + label:nth-of-type(2)::before{content:'\0272d\0272d'}
input[type="radio"]:checked + label:nth-of-type(3)::before{content:'\0272d\0272d\0272d'}
input[type="radio"]:checked + label:nth-of-type(4)::before{content:'\0272d\0272d\0272d\0272d'}
input[type="radio"]:checked + label:nth-of-type(5)::before{content:'\0272d\0272d\0272d\0272d\0272d'}

label {
  color: grey;
}

label:hover {
  cursor: pointer;
  color: black;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  color: black;
}

<div star-buttons>
  <input class="star-buttons" type="radio" name="radio" value="1" id="_1"><label for="_1"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="2" id="_2"><label for="_2"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="3" id="_3"><label for="_3"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="4"id ="_4"><label for="_4"></label><br>
  <input class="star-buttons" type="radio" name="radio" value="5" id="_5"><label for="_5"></label>
</div>

score 0 · Answer 5 · answered Mar 07 '19 at 20:29

0

Just keep label:black and remove all Try ! important It will stay black Input is already display none so CSN does not matter

answered Mar 07 '19 at 20:29

Jin Thakur

2,711
18
15

Get radio button label to stay the same color once I've checked it

5 Answers5