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. 设计模式学习总结（六）原型模式(Prototype)

    原型模式即通过对象拷贝的方式来实现对同类对象的生成的一种设计模式! 浅复制:对于值类型,则直接复制该值,对于引用类型的字段则是对其引用的复制,如果原引用与现引用只要有一个的值发生变化,则都会造成两者值 ...

  2. curl -w函数

    url_effective 最终获取的url地址,尤其是当你指定给curl的地址存在301跳转,且通过-L继续追踪的情形. http_code http状态码,如200成功,301转向,404未找到, ...

  3. Python Fileinput 模块

    作者博文地址:http://www.cnblogs.com/liu-shuai/ fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行. [默 ...

  4. 深入学习keepalived之预备工作--线程

    1. 线程的定义 1.1 线程定义在scheduler.h文件中,其定义如下所示 /* Thread itself. */ typedef struct _thread { unsigned long ...

  5. javascript移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  6. 11、幻灯片：Slides

    /* ---ts----*/ import { Page,Slides } from 'ionic-angular'; import { ViewChild } from '@angular/core ...

  7. android device ID获取

    Android  Device ID是Android用户在Google认证过手机的设备唯一标识,当然国内很多Android手机没有经过Google认证,所以一般没有Google官方Android de ...

  8. Android设备之间通过Wifi通信

    之前写过PC与Android之间通过WIFI通信(通过Socket,可以在博客里面搜索),PC作为主机,Android作为客户机,现在手头有一台仪器通过wifi传输数据,如果仪器作为主机发射WIFI热 ...

  9. Cocos2d-js 开发记录：图片数据资源等的异步加载

    这里说的是在需要的使用加载图片,比如游戏中的某个关卡的图片,不用在游戏一开始就加载(万一用户玩不到那关,岂不是很冤,流量费了那么多),否则载入速度也慢.这种方式加载资源要用到cc.loader官方文档 ...

  10. javaSystem.out.println()输出byte[]和char[]异常的问题

    javaSystem.out.println()输出byte[]和char[]异常的问题 今天 突然有人问我他写的byte[]和char[],在用System.out.println()输出的时候所得 ...