Показать сообщение отдельно
  #1 (permalink)  
Старый 28.03.2020, 03:25
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

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

<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>
Ответить с цитированием