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>