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.

hack-checkbox的更多相关文章

  1. css的一些复习

    css,全称Cascading Style Sheets,层叠样式表. css选择器是从右往左解析的,解析速度会比较快. 选择器 选择器权重 !important 优先级最高 元素属性 优先级高 相同 ...

  2. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  3. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  4. 你见过吗？9款超炫的复选框（Checkbox）效果

    复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...

  5. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  6. jquery选中radio或checkbox的正确姿势

    jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题,没有任何征兆的..,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料, ...

  7. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  8. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  9. WPF CheckBox 样式

    <Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...

  10. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

随机推荐

  1. Kafka消费不到数据的特殊情况

    我大约是把kafka消费不到数据的特殊情况都经历了一遍了吧= =. kafka消费不到数据的原因,首先检查配置之类的,如是否设置了group.id,对应的topic是否正确等等,这些不多说. 下面是我 ...

  2. 文献综述六：基于JS 技术的电子商品管理系统设计及实现

    一.基本信息 标题:基于JS 技术的电子商品管理系统设计及实现 时间:2017 出版源:无线互联科技 文件分类:js技术的研究 二.研究背景 主要对Js下电商管理系统的设计及实现进行了探讨,利用软件工 ...

  3. jenkins 部署应用

    一,安装rpm包 安装jdk 安装jenkins 查看jdk是否安装成功 启动jenkins systemctl start jenkins 开机自启 systemctl enable jenkins ...

  4. ubuntu安装VMware Tools报错enter the path to the kernel header files

    $ sudo apt-get install build-essential linux-headers-$(uname -r) cd /lib/modules/$(uname -r)/build/i ...

  5. (转)超全整理！Linux性能分析工具汇总合集

    超全整理!Linux性能分析工具汇总合集 原文:http://rdc.hundsun.com/portal/article/731.html 出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望, ...

  6. pulic——功能性(自己写完测试的)

    一. 构建一个数组[“00:00”,"00:05"..."23:55"]的数组 function buildAxis(){ var ary=[]; ary.pu ...

  7. SpringSecurity 3.2入门（6）简单介绍默认使用的十一个过滤器

    Security提供了20多个filter,每个过滤器都提供特定的功能.这些filter在Spring Security filter过滤器链中的缺省顺序由 org.springframework.s ...

  8. MyBatis 中 sqlmapconfig核心标签说明以及配置

    文件介绍 对于 MyBatis 最核心的全局配置文件是 sqlmapConfig.xml 文件,其中包含了数据库的连接配置信息.Mapper 映射文件的加载路径.全局参数.类型别名等. 配置项详解 标 ...

  9. Number()转换规则

    转换规则: Number(): 1)如果是Boolean值,true和false将分别转换为1和0. 2)如果是数字值,只是简单的传入和返回. 3)如果是null值,返回0. 4)如果是undefin ...

  10. Java设计模式—访问者模式

    原文地址:http://www.cnblogs.com/java-my-life/archive/2012/06/14/2545381.html 总结的太棒啦,导致自己看了都不想总结了...... 在 ...