将单选按钮转化为响应式星级评分遇阻，求解决方案

你的星级评分交互失效，核心问题是HTML中label的for属性与对应input的id不匹配，另外原CSS缺少响应式适配，导致小屏幕显示异常。以下是完整的修正方案：

修正后的HTML #

<div class="col-4">
    <img src="images/g13.jpg">
    <h4>Green X-Mas</h4>
    <p>$35.00</p>
    <div class="rate">
        <input type="radio" id="star5-3" name="rate-3" value="5" />
        <label for="star5-3" title="5分">★</label>
        <input type="radio" id="star4-3" name="rate-3" value="4" />
        <label for="star4-3" title="4分">★</label>
        <input type="radio" id="star3-3" name="rate-3" value="3" />
        <label for="star3-3" title="3分">★</label>
        <input type="radio" id="star2-3" name="rate-3" value="2" />
        <label for="star2-3" title="2分">★</label>
        <input type="radio" id="star1-3" name="rate-3" value="1" />
        <label for="star1-3" title="1分">★</label>
    </div>
</div>

修正后的CSS（含响应式） #

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked) > input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
    transition: color 0.2s ease;
}

.rate > input:checked ~ label {
    color: #ffc700;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .rate:not(:checked) > label {
        font-size: 24px;
    }
    .rate {
        height: 36px;
    }
}

@media (max-width: 576px) {
    .rate:not(:checked) > label {
        font-size: 20px;
    }
    .rate {
        height: 30px;
        padding: 0 5px;
    }
}

关键修复点说明 #

• ID与For属性匹配：将input的id从star5.3改为star5-3（避免使用点号，防止与CSS类选择符混淆），同时同步label的for属性，确保点击标签能触发单选按钮。
• 简化视觉呈现：把label内的文字替换为直接的★符号，更贴合星级评分的视觉需求，保留title属性用于hover提示。
• 添加响应式适配：通过媒体查询调整不同屏幕尺寸下的星星大小和容器高度，保证在手机、平板等设备上正常显示。
• 优化交互体验：给label的颜色变化添加过渡动画，让hover和选中状态切换更流畅。

内容的提问来源于stack exchange，提问作者aishah m.