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