首页 > web前端 > css教程 > 纯css实现选框选中效果

纯css实现选框选中效果

王林
发布: 2020-11-09 15:41:17
转载
4956 人浏览过

纯css实现选框选中效果

选择器介绍:

1、“+”:如 div + p    选择紧接在

元素之后的所有

元素。

2、:checked :如 input:checked 单选框和复选框的选中状态。

(学习视频分享:css视频教程

实现代码:

<style type="text/css">
            .che-box {
            display:inline;
        }
        .che-box input{
            display: none;
        }
        .che-box label{
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 3px 5px;
        }
        .che-box input:checked + label{
            border-color: #088de8;
            background: #088de8;
            color: #fff;
        }
    </style>
 
 
<div class="che-box">
        <input type="checkbox" id="che1" />
        <label for="che1">
            标签1
        </label>
    </div>
    <div class="che-box">
        <input type="checkbox" id="che2" />
        <label for="che2">
            标签2
        </label>
    </div>
登录后复制

实现效果:

8a1132cd33e24c51358f9648b1fb631.png

这情况主要用于 type=“checkbox,radio”的input 自定义选中样式的,在实际工作中经常会使用到,希望对大家有帮助。

相关推荐:CSS教程

以上是纯css实现选框选中效果的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:csdn.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板