html中修改单选框选中样式

原创于 2020-10-17 15:18:03 发布 · 1.9k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用CSS进行样式定制的例子，展示了如何通过隐藏默认样式并使用背景图片来改变选择框的外观。通过不同状态下的背景图片切换实现选择框的未选中和选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      <div class="check"> 
                    <input type="radio" name="zi" id="zijin1" checked value="1000-3000">
                    <label for="zijin1" style="cursor:pointer">1000-3000</label>
                    <input type="radio" name="zi" id="zijin2" value="3000-5000">
                    <label for="zijin2" style="cursor:pointer">3000-5000</label>
                    <input type="radio" name="zi" id="zijin3" value="5000以上">
                    <label for="zijin3" style="cursor:pointer">5000以上</label>
                </div>
            </div>

css

       .check-item input {
            display: none;  //先取消默认的样式
        }

        label::before {
            display: inline-block;
            width: 0.33rem;
            height: 0.33rem;
            background-image: url(img/check2.png);
            background-size: 100% 100%;          //选中之前的样子
        }

        .check-item input:checked+label::before {
            background-image: url(img/check.png);
            background-size: 100% 100%;    //选中之后的样式
        }