hack-checkbox

最新推荐文章于 2022-05-07 09:38:55 发布

weixin_30552811

最新推荐文章于 2022-05-07 09:38:55 发布

阅读量171

点赞数

原文链接：http://www.cnblogs.com/wzndkj/p/10348783.html

版权

checkbox选择按钮要用我们自己的样式，看到这个的时候，很可能会以为需要checkbox才能实现，用css可能很难。其实狠简单。

<style>
　　.checkbox input{
　　　　display: none;
　　}
　　.checkbox input + label {
　　　　background: url(checkbox1.png) left center no-repeat;
　　　　background-size: 20px 20px;
　　　　padding-left: 20px;
　　}
　　.checkbox input:checked + label {
　　　　background-image: url(checkbox2.png)
　　}
</style>
<body>
　　<div class="checkbox">
　　　　<input type="checkbox" id="handsome">
　　　　<label for="handsome">我很帅</label>
　　</div>
</body>

首先没有选中的时候，设置一个背景，再设置一个padding，这样就可以显示出来，然后将背景的大小设置成跟padding一样大。选中的话，我们给了一个input:checked这样一个状态。这个状态是css提供的。然后使用了一个+。＋号是后续的兄弟元素。也就是当checkbox选中的时候，label的样式就换个背景，这个选择器和+号就是点睛之笔。

同样的思路也可以用于radio.

转载于:https://www.cnblogs.com/wzndkj/p/10348783.html