Форум

Globus · #1 (**permalink**) 28.03.2020, 03:25

Друзья, есть фиксированный штмл, никак не поменять. И есть задача сделать рейтинг звездочками. Но застрял вот на этом результате (если не по адресу, то сразу извиняюсь) :

<body><div class="elementor-field-subgroup elementor-subgroup-inline">
  <span class="elementor-field-option">
    <input type="radio" value="" id="form-field-field_3-0" name="form_fields[field_3]" required="required" aria-required="true"> 
    <label for="form-field-field_3-0">1</label></span>
  
  <span class="elementor-field-option">
  <input type="radio" value="2" id="form-field-field_3-1" name="form_fields[field_3]" required="required" aria-required="true"> 
  <label for="form-field-field_3-1">2</label></span>
  
  <span class="elementor-field-option">
  <input type="radio" value="3" id="form-field-field_3-2" name="form_fields[field_3]" required="required" aria-required="true"> 
  <label for="form-field-field_3-2">3</label></span>
  
  <span class="elementor-field-option">
  <input type="radio" value="4" id="form-field-field_3-3" name="form_fields[field_3]" required="required" aria-required="true"> 
  <label for="form-field-field_3-3">4</label></span>
  
  <span class="elementor-field-option"><input type="radio" value="5" id="form-field-field_3-4" name="form_fields[field_3]" required="required" aria-required="true"> 
  <label for="form-field-field_3-4">5</label>
  </span>
</div><style id="jsbin-css">
.elementor-field-subgroup.elementor-subgroup-inline
{
  width: 125px;
  height: 25px;
}
.elementor-field-subgroup.elementor-subgroup-inline  input[type="radio"]
{
  display: none;
}
.elementor-field-subgroup.elementor-subgroup-inline  span   {
  float: right;
  display: block;
  font-size:0;
  width: 25px;
  height: 25px;
  background: grey url(star.png) no-repeat 50% 0;
  cursor: pointer;
}

.elementor-field-subgroup.elementor-subgroup-inline span:hover, 
.elementor-field-subgroup.elementor-subgroup-inline span:hover ~  span ,
.elementor-field-subgroup.elementor-subgroup-inline span input[type="radio"]:checked ~  span  
{
  background-position: 50% -25px;
  background-color: red;
}
</style>
</body>

рони · #2 (**permalink**) 28.03.2020, 09:18

Globus,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
addEventListener("click", event => {
        const star = event.target.closest(".elementor-field-option")
        if(!star) return;
        star.querySelector("input").checked = true;
        let color = "grey";
        [...star.parentNode.children].forEach( elem => {
        if(elem == star) color = "red";
        elem.style.backgroundColor = color;
        })
    }, {once : true});
  </script>
</head>
<body>
<body><div class="elementor-field-subgroup elementor-subgroup-inline">
  <span class="elementor-field-option">
    <input type="radio" id="form-field-field_3-0" name="form_fields[field_3]" required="required" aria-required="true" >
    <label for="form-field-field_3-0">1</label></span>

  <span class="elementor-field-option">
  <input type="radio" value="2" id="form-field-field_3-1" name="form_fields[field_3]" required="required" aria-required="true">
  <label for="form-field-field_3-1">2</label></span>

  <span class="elementor-field-option">
  <input type="radio" value="3" id="form-field-field_3-2" name="form_fields[field_3]" required="required" aria-required="true">
  <label for="form-field-field_3-2">3</label></span>

  <span class="elementor-field-option">
  <input type="radio" value="4" id="form-field-field_3-3" name="form_fields[field_3]" required="required" aria-required="true">
  <label for="form-field-field_3-3">4</label></span>

  <span class="elementor-field-option"><input type="radio" value="5" id="form-field-field_3-4" name="form_fields[field_3]" required="required" aria-required="true">
  <label for="form-field-field_3-4">5</label>
  </span>
</div><style id="jsbin-css">
.elementor-field-subgroup.elementor-subgroup-inline
{
  width: 125px;
  height: 25px;
}
.elementor-field-subgroup.elementor-subgroup-inline  input[type="radio"]
{
  display: none;
}
.elementor-field-subgroup.elementor-subgroup-inline  span   {
  float: right;
  display: block;
  font-size:0;
  width: 25px;
  height: 25px;
  background: grey url(star.png) no-repeat 50% 0;
  cursor: pointer;
}

.elementor-field-subgroup.elementor-subgroup-inline span:hover,
.elementor-field-subgroup.elementor-subgroup-inline span:hover ~  span ,
.elementor-field-subgroup.elementor-subgroup-inline span input[type="radio"]:checked ~  span
{
  background-position: 50% -25px;
  background-color: red;
}
</style>
</body>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript