纯css实现选中效果

纯css实现选中效果

很多时候我们做input的选中后的效果都是通过点击事件给点击的对象添加一个类，然后通过不同的类设置不同的样式，以达到不同的效果，这过程需要js的点击事件。今天分享一下我对于某些标签不用js也可以实现选中后的效果。

在这之前我们先来说一下css的几个选择器：

1、“+”：如 div + p    选择紧接在 <div> 元素之后的所有 <p> 元素。

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

上代码：

<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 自定义选中样式的，在实际工作中经常会使用到，希望对大家有帮助