单选框radio-复选框checkbox去掉默认样式添加新样式及点击事件

最新推荐文章于 2024-05-13 19:06:49 发布

GGGGGG.enough

最新推荐文章于 2024-05-13 19:06:49 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/ggbee_/article/details/106813727

版权

使用 -webkit-appearance: none;border-radius: 0; outline: 0; 更改单选框radio-复选框checkbox去掉默认样式，然后自己定义自己想要的单选框radio-复选框checkbox新样式，同时给他们添加点击新的点击效果。

最后样式如上所述...

<title>消除表单自定义样式自己定义样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        p {
            position: relative;
            margin-left: 40px;
        }

        /* 消除原有样式样子 */
        input {
            /* 将样式去掉了... */
            /* iphone及ipad下输入框button,input,textarea默认内阴影 */
            -webkit-appearance: none;
        }

        input {
            border-radius: 0;
            outline: 0;
        }

        /* 自定义复选框 */
        input[type="checkbox"] {
            width: 16px;
            height: 16px;
            border: 1px solid #ccc;
        }

        .gou {
            display: none;
            position: absolute;
            left: 3px;
            top: 5px;
            width: 10px;
            height: 5px;
            border-width: 0px 0px 2px 2px;
            border-style: solid;
            border-color: #333;
            transform: rotate(-45deg);
        }

        input[type="checkbox"]:checked~.gou {
            display: block;
        }

        /* 自定义单选框 */
        input[type="radio"] {
            width: 16px;
            height: 16px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }

        .quan {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #8b76f9;
            box-shadow: 0px 0px 3px 0px #8b76f9 inset;
        }

        input[type="radio"]:checked+.quan {
            display: block;
        }
    </style>
</head>

<body>
    <div class="contanier">
        <p>
            <input type="checkbox" name="" id="">
            <!-- 自定义勾选 -->
            <em class="gou"></em>
        </p>
        <p>
            <!-- 自定义圈圈样式 -->
            <input type="radio" name="sex" id="">
            <em class="quan"></em>
        </p>
        <p>
            <!-- 自定义圈圈样式 -->
            <input type="radio" name="sex" id="">
            <em class="quan"></em>
        </p>
    </div>
</body>

GGGGGG.enough

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选框radio-复选框checkbox去掉默认样式添加新样式及点击事件

使用-webkit-appearance:none;border-radius:0;outline:0; 更改单选框radio-复选框checkbox去掉默认样式，然后自己定义自己想要的单选框radio-复选框checkbox新样式，同时给他们添加点击新的点击效果。最后样式如上所述...<title>消除表单自定义样式自己定义样式</title> <style> * { margin: 0...
复制链接

扫一扫