Question 344428 in Html Question posted in
Some basic documentation can be found here.

Html – Apply color after clicking radio input

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;
}
.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ff0000;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}







.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>
Tags:

2

Answers


  1. 0

    If possible, I’d recommend updating the markup so the labels come after the inputs.

    <input type="radio" name="star" id="star-5">
<label for="star-5">
  <span class="visually-hidden">5 stars</span>
</label>

    This will allow you to use CSS selectors like input:checked ~ label. Here are some good resources:

    Login or Signup to reply.
  2. 0

    I don’t think you can do this with css the way your HTML code is written, but you can easily with javascript. below the code, once you click on a star it either adds or remove the color red (using toggle() function). Also note that to see the red colored star don’t let the cursor on hover state over the clicked star.

    const inputLabel = document.querySelectorAll('.uk-flex')

inputLabel.forEach(label=>{
  label.addEventListener('click',(e)=>{
    target = e.target
    target.classList.toggle('color-it')

  })
})
    *{
  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:not(:checked) > label:hover,
.uk-margin:not(:checked) > label:hover ~ label {
  color: #deb217;  
}

.uk-flex.uk-margin-right.color-it{
  color: red;
}
    <div id="wrapper">
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search