Рейтинг звездами (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> |
рейтинг звёздочками
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> |
Часовой пояс GMT +3, время: 11:04. |