Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2020, 09:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

рейтинг звёздочками
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Содержимое Input radio созданный с помощью Javascript не видно в браузере Daulet3d Общие вопросы Javascript 2 01.05.2016 06:04
Как сделать обязательным input radio? Anrew Общие вопросы Javascript 11 28.05.2015 00:59
input radio и input text tart Элементы интерфейса 4 26.01.2015 19:14
Событие на input radio redwert Элементы интерфейса 3 23.09.2014 09:45
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27