CODEWITHSUNDEEP
htmlcss
user9355526
user9355526

Reputation:

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

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?

Upvotes: 2

Views: 147

Answers (5)

Jin Thakur
Jin Thakur

Reputation: 2773

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

Upvotes: 0

enxaneta
enxaneta

Reputation: 33024

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>

Upvotes: 0

Joshua Robinson
Joshua Robinson

Reputation: 3563

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

Upvotes: 3

jstarnate
jstarnate

Reputation: 329

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;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105863

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>

Upvotes: 2

Related Questions