纯CSS3 实现单选框和复选框的样式美化

最新推荐文章于 2023-12-28 19:58:11 发布

'"<>{{7*7}}

最新推荐文章于 2023-12-28 19:58:11 发布

阅读量1.2k

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_43415644/article/details/106610958

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

#效果：

#思路：

将原来的单选框隐藏,注意display:none 只是不显示该标签，该标签仍然存在于DOM树中，

虽然input框已经隐藏了，但是应为label和对应的input框是通过id关联的，所以我们仍然可以通过选择label来选中input框。

不论是radio 还是checkbox 在被选中的情况下，状态都是input:checked

所以，我们只要更换input被选中时的样式即可。

#实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯CSS3单选框复选框美化样式代码</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <style>
        .clear{
            clear:both;
        }
        /* 将原来的单选框隐藏,注意display:none 只是不显示该标签，该标签仍然存在于DOM树中 */
        /* 虽然input框已经隐藏了，但是应为label和对应的input框是通过id关联的，所以我们仍然可以通过选择label来选中input框 */
        .radio-style input{
            display:none;
        }
        .radio-style span{
            display:none;
        }
        .radio-style label{
            float:left;
            border:1px solid  #337ab7;
            border-radius:5px;
            padding:2px 10px 2px 10px;
            /* 从上边开始，顺时针顺序:上 右 下 左 */
            margin:5px;
            line-height:20px;
            min-width:80px;
            text-align:center;
            font-weight:lighter;
            cursor:pointer;
        }
        /* 设置radio-style中的当input被选中时的紧接在其后的label的样式 */
        .radio-style input:checked+label{
            color:#fff;
            background:#337ab7;
        }
        .radio-style input:checked+label span{
            display:inline;
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="page-header">
                <div class="page-title">
                    <h1>纯CSS3单选框复选框美化样式代码</h1>
                </div>
            </div>
            <p>
                你最喜欢哪个季节（radio单选）</p>
            <div class="radio-style">
                    <input type="radio" name='season' id='spring' >
                    <label for="spring">春季 <span class='glyphicon glyphicon-ok'></span>    </label>
                    <input type="radio" name='season' id='summer' >
                    <label for="summer">夏季 <span class='glyphicon glyphicon-ok'></span>    </label>
                    <input type="radio" name='season' id='autumn' >
                    <label for="autumn">秋季 <span class='glyphicon glyphicon-ok'></span>    </label>
                    <input type="radio" name='season' id='winter' >
                    <label for="winter">冬季 <span class='glyphicon glyphicon-ok'></span>    </label>
            </div>
            <div class='clear'></div>
            <hr>
            <p>
                    你最喜欢吃那些水果(checkbox多选框)
            </p>
            <div class="radio-style">
                    <input type="checkbox" name='fruit' id='banana'>
                    <label for="banana">香蕉 <span class='glyphicon glyphicon-ok'></span></label>
                    <input type="checkbox" name='fruit' id='apple'>
                    <label for="apple">苹果 <span class='glyphicon glyphicon-ok'></span></label>
                    <input type="checkbox" name='fruit' id='watermelon'>
                    <label for="watermelon">西瓜 <span class='glyphicon glyphicon-ok'></span></label>
                    <input type="checkbox" name='fruit' id='orange'>
                    <label for="orange">桔子 <span class='glyphicon glyphicon-ok'></span></label>
            </div>

    </div>

</body>
</html>

'"<>{{7*7}}

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3 实现单选框和复选框的样式美化

#效果：#思路：将原来的单选框隐藏,注意display:none 只是不显示该标签，该标签仍然存在于DOM树中，虽然input框已经隐藏了，但是应为label和对应的input框是通过id关联的，所以我们仍然可以通过选择label来选中input框。不论是radio 还是checkbox 在被选中的情况下，状态都是input:checked 所以，我们只要更换input被选中时的样式即可。#实现：<!DOCTYPE html&g...
复制链接

扫一扫