hack-checkbox
2024-08-29 06:22:29
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.
最新文章
- Java基础知识系列——日期
- Kafka是分布式发布-订阅消息系统
- OpenCV成长之路(5):图像直方图的应用
- BZOJ3172[Tjoi2013]单词 题解
- js从一个函数中结束另一个函数的问题
- C# 泛型简介
- PHP页面跳转几种实现技巧
- Javascript之响应式相册
- asp.net页面刷新等问题
- Delphi Jpg和Gif转Bmp
- 如何配置Git支持大小写敏感和修改文件名中大小写字母呢?(转)
- [LeetCode160]Intersection of Two Linked Lists
- Hadoop集群
- BZOJ_4006_[JLOI2015]管道连接_斯坦纳树
- [matlab] 16.多约束非线性规划 ga工具箱解决 [带不等式约束]
- ROS 小乌龟测试
- U3D学习14-一阶段学习总结
- JAVA 注解,泛型,反射获取泛型,并实例化
- idea正则表达式查找代码的方法
- Q-learning简明实例