Selector introduction:
1. " ": For example, div p selects all
elements immediately after the
2. :checked: For example, input:checked indicates the checked status of radio buttons and check boxes.
(Learning video sharing: css video tutorial)
Implementation code:
<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> Implementation effect:
This situation is mainly used for customizing the selection style of the input with type="checkbox, radio". It is often used in actual work. I hope it will be helpful to everyone.
Related recommendations: CSS tutorial
The above is the detailed content of Pure css to achieve box selection effect. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
