解决点击Radio按钮后星级评分星星无法上色的问题

问题概述 #

我在编辑现有表单时，尝试将radio按钮替换为星级评分星星，但点击星星后无法为其应用颜色。原CSS选择器无法正确生效：

.uk-margin > label > div > input:checked, label {
    color: #ff0000;    
}

问题分析 #

1. 原选择器中逗号分隔的label会全局选中所有标签，和之前的.uk-margin:not(:checked) > label样式优先级冲突，且未关联到input:checked的状态
2. HTML结构里input嵌套在label内部的div中，无法通过兄弟选择器关联，需要用:has()伪类识别包含选中input的label
3. 星星通过label:before伪元素生成，颜色需作用在伪元素或label上才能生效

修正后的代码 #

CSS部分 #

* {
    margin: 0;
    padding: 0;
}

.uk-margin {
    float: left;
    height: 46px;
    padding: 0 10px;
}

/* 隐藏原生radio按钮 */
.uk-margin label > div > input {
    position: absolute;
    top: -9999px;
}

/* 未选中状态的星星样式 */
.uk-margin label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.uk-margin label:before {
    content: '★ ';
}

/* 选中状态的星星颜色（含当前及之前的所有星星） */
.uk-margin label:has(> div > input:checked),
.uk-margin label:has(> div > input:checked) ~ label {
    color: #ff0000;
}

/* hover交互效果 */
.uk-margin label:hover,
.uk-margin label:hover ~ label {
    color: #deb217;  
}

.uk-margin label:has(> div > input:checked):hover,
.uk-margin label:has(> div > input:checked):hover ~ label,
.uk-margin label:hover ~ label:has(> div > input:checked),
.uk-margin label:hover ~ label:has(> div > input:checked) ~ label {
    color: #c59b08;
}

HTML部分（无需修改） #

<div data-id="page#18" class="rate2 uk-margin">
   <fieldset data-yooessentials-form-field="tempi" style="border-width: 0; margin: 0; padding: 0;">
      <div class="uk-form-controls">
         <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
            <label class="uk-flex uk-margin-right uk-first-column">
               <div>
                 <input id="star1" type="radio" name="tempi" class="uk-radio" value="1">
               </div>
               <div class="uk-margin-small-left">1</div>
            </label>
            <label class="uk-flex uk-margin-right">
               <div>
                 <input id="star2" type="radio" name="tempi" class="uk-radio" value="2">
               </div>
               <div class="uk-margin-small-left">2</div>
            </label>
            <label class="uk-flex uk-margin-right">
               <div>
                 <input id="star3" type="radio" name="tempi" class="uk-radio" value="3">
               </div>
               <div class="uk-margin-small-left">3</div>
            </label>
            <label class="uk-flex uk-margin-right">
               <div>
                 <input id="star4" type="radio" name="tempi" class="uk-radio" value="4">
               </div>
               <div class="uk-margin-small-left">4</div>
            </label>
            <label class="uk-flex uk-margin-right">
               <div>
                 <input id="star5" type="radio" name="tempi" class="uk-radio" value="5">
               </div>
               <div class="uk-margin-small-left">5</div>
            </label>
         </div>
      </div>
      <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
   </fieldset>
</div>

关键说明 #

• 用:has()伪类精准选中包含已选中input的label，通过~ label选中该标签之前的所有星星，实现星级评分的连续高亮效果
• 简化原生radio的隐藏逻辑，无需额外的:not(:checked)判断
• 调整hover状态选择器，确保选中状态下的交互效果正常生效

内容的提问来源于stack exchange，提问作者bastiag5