input 纯CSS 自定义单选框/多选框样式

最新推荐文章于 2025-06-17 21:59:09 发布

freedom_文

最新推荐文章于 2025-06-17 21:59:09 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS form

本文链接：https://blog.youkuaiyun.com/freedomVenly/article/details/83176288

CSS 同时被 2 个专栏收录

16 篇文章

订阅专栏

form

8 篇文章

订阅专栏

本文分享了一段HTML和CSS代码，用于创建自定义样式的单选按钮。通过使用绝对定位和伪元素，实现了按钮的美观展示，并展示了如何通过:checked伪类改变选中状态的样式。

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

备忘，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style>
        #d1{
            width:200px;
            margin: 100px auto;
        }
        label{
            position: relative;
            display: inline-block;
            width: 48%;
        }
        .inputStatus{
            position: absolute;
            top:0;
            left: 0;
            width: 22px;
            height: 15px;
            opacity: 0;
        }

        .inputStyle2{
            position: relative;
            top: 3px;
            left: 0;
            display: inline-block;
            padding: 10px;
            /*多选*/
            background: url("img/allBgs.png") no-repeat -3px -2px;
            /*单选*/
            /*background: url("img/allBgs.png") no-repeat -52px -2px;*/
        }

        .inputStatus:checked+.inputStyle2{
            /*多选*/
            background: url("img/allBgs.png") no-repeat -28px -2px;
            /*单选*/
            /*background: url("img/allBgs.png") no-repeat -75px -2px;*/
        }

    </style>
</head>
<body>

<div  id="d1">
    <label class='' style="position: relative;">
        <input type='radio'  id="history_finish0" class='inputStatus' name="v1">
        <span class='inputStyle2'></span> 确定
    </label>

    <label class='labelRadio' style="margin-bottom: 0;">
        <input type='radio' class='inputStatus' name="v1">
        <span class='inputStyle2'></span> 取消
    </label>
</div>

</body>
</html>

效果图：
在这里插入图片描述