I am editing an already created form where I extracted this code. I wished to replace the "radio buttons" with stars. I am having difficulty applying the color to the stars once clicked. I have done some testing but I am having difficulty on how to set the:
.uk-margin > label > div > input:checked, label {
color: #ff0000;
}
*{
margin: 0;
padding: 0;
}
.uk-margin {
float: left;
height: 46px;
padding: 0 10px;
}
.uk-margin:not(:checked) > label > div > input {
position:absolute;
top:-9999px;
}
.uk-margin:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.uk-margin:not(:checked) > label:before {
content: '★ ';
}
.uk-margin > label > div > input:checked, label {
color: #ff0000;
}
.uk-margin:not(:checked) > label:hover,
.uk-margin:not(:checked) > label:hover ~ label {
color: #deb217;
}
.uk-margin > input:checked + label:hover,
.uk-margin > input:checked + label:hover ~ label,
.uk-margin > input:checked ~ label:hover,
.uk-margin > input:checked ~ label:hover ~ label,
.uk-margin > label:hover ~ input:checked ~ label {
color: #c59b08;
}
<div data-id="page#18" class="rate2 uk-margin">
<fieldset data-yooessentials-form-field="tempi" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div>
<input id="star1" type="radio" name="tempi" class="uk-radio" value="1">
</div>
<div class="uk-margin-small-left">1</div>
</label>
<label class="uk-flex uk-margin-right">
<div>
<input id="star2" type="radio" name="tempi" class="uk-radio" value="2">
</div>
<div class="uk-margin-small-left">2</div>
</label>
<label class="uk-flex uk-margin-right">
<div>
<input id="star3" type="radio" name="tempi" class="uk-radio" value="3">
</div>
<div class="uk-margin-small-left">3</div>
</label>
<label class="uk-flex uk-margin-right">
<div>
<input id="star4" type="radio" name="tempi" class="uk-radio" value="4">
</div>
<div class="uk-margin-small-left">4</div>
</label>
<label class="uk-flex uk-margin-right">
<div>
<input id="star5" type="radio" name="tempi" class="uk-radio" value="5">
</div>
<div class="uk-margin-small-left">5</div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
This snippet has removed the CSS which appears to have nothing to do with the problem in the question (e.g. those with .rate).
It starts again on the hover and checked states, using CSS :has to select when an input is checked or there is a hover.
Note: flex is used to show the stars in order (without a need to change the existing HTML) rather than float.