Issue
im having problem on how to change the color of label text for the radio button to blue color after the radio is checked. I've followed many sample code but it wont work.
Below is my html code
<div class="input-group">
<label for="pickup-1" class="radio-custom-label">10.00 PM</label>
<div class="text-group-field pickup-day choose-time">
<input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
</div>
</div>
Solution
You need to change your HTML structure a little bit & use ~
(General Sibling Combinator) selector, like:
.radio-custom:checked ~ label {
color: blue;
}
Have a look at the snippet below:
.radio-custom:checked ~ label {
color: blue;
}
label {
display: block;
flex: 1;
}
.input-group {
display: block;
}
.text-group-field {
padding: 10px;
}
.inner-block {
position: relative;
display: flex;
flex-direction: row-reverse;
}
<div class="input-group">
<div class="text-group-field pickup-day choose-time">
<div class="inner-block">
<input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
<label for="pickup-1" class="radio-custom-label">10.00 PM</label>
</div>
</div>
<div class="text-group-field pickup-day choose-time">
<div class="inner-block">
<input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
<label for="pickup-2" class="radio-custom-label">10.00 PM</label>
</div>
</div>
<div class="text-group-field pickup-day choose-time">
<div class="inner-block">
<input id="pickup-3" class="radio-custom input-group-field" name="radio-group" type="radio">
<label for="pickup-3" class="radio-custom-label">10.00 PM</label>
</div>
</div>
</div>
Hope this helps!
Answered By - Saurav Rastogi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.