纯css实现选框选中效果

选择器介绍：

1、“+”：如 div + p 选择紧接在 <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>

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

相关推荐：CSS教程

以上就是纯css实现选框选中效果的详细内容，更多内容请关注技术你好其它相关文章！