本文摘自PHP中文网,作者V,侵删。
选择器介绍:
1、“+”:如 div + p 选择紧接在 <div> 元素之后的所有 <p> 元素。
2、:checked :如 input:checked 单选框和复选框的选中状态。
(学习视频分享:css视频教程)
实现代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | < 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 >
|
实现效果:
阅读剩余部分
相关阅读 >>
css怎么不占位隐藏元素
css如何清除浮动?clear和bfc方法介绍
css modules 详解
css中列表样式是什么
如何使用css让背景图片不重复
css怎么实现内容超出隐藏效果
css border-top-width属性怎么用
前端怎么学
css中如何禁用a标签按钮
css中的滑动条怎么隐藏
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 纯css实现选框选中效果