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. 啊啊啊啊啊啊啊今天就写,炒鸡简单 数据库Sqlite的创建,库的增删改查

    啦啦啦啦啦啦啦 写这个不用多长时间,我直接写代码注释都是些语句,Sql语句和Api来操作数据库 ,语句的参数我会注释 SQLite数据库创建数据库需要使用的api:SQLiteOpenHelper必须 ...

  2. roboframework-ride运行案例时报 Error 267 错误问题

    偶然间碰到这个问题,检查下路径是否有中文,如有中文换成英文试试. (ps:通常自己创建的中文路径也是可以的,我的案例是从Linux环境中创建拷贝过来的,可能导致案例路径编码问题)

  3. BNU27932——Triangle——————【数学计算面积】

    Triangle Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class nam ...

  4. Django 实现组合条件搜索、jsonp跨域请求

    1.类似于汽车之家的条件组合搜索那样 代码:http://pan.baidu.com/s/1nu7vZYD 2.jsonp实现跨域请求(在自己网页自动调用其他网站的接口,并将获取的数据呈现在自己网页上 ...

  5. c# xml API操作

    LoginInfo loginInfo = new LoginInfo(); xmlNode = _xml.SelectSingleNode(loginUrl); loginInfo.LoginUrl ...

  6. Spring3.2下使用JavaMailSenderImpl类发送邮件

    1.JavaMailSenderImpl类 Spring的邮件发送的核心是MailSender接口,在Spring3.0中提供了一个实现类JavaMailSenderImpl,这个类是发送邮件的核心类 ...

  7. node.js获取cookie

    node.js 获取cookie var Cookies ={}; if (req.headers.cookie != null) { req.headers.cookie.split(';').fo ...

  8. vba SpecialCells(Type,Value) 参数说明

    Range.SpecialCells 方法可以返回一个 Range 对象,该对象代表与指定类型和值匹配的所有单元格. 其语法如下: 表达式.SpecialCells(Type,Value) 其Type ...

  9. 从零开始的全栈工程师——JS面向对象（复习）

    作用域 栈内存:js执行的环境堆内存:存放代码块的空间 存放方式 键值对形式存放 字符串的形式存放js在执行之前 浏览器会给他一个全局作用域叫window 每个作用域下都分为两个模块 一个是内存模块一 ...

  10. html相对定位绝对定位

    孔子说:“温故而知新,可以为师矣.”这几天参加了一个免费的前端课,每天晚上都有直播,讲解一个独立的案例.在听前端基础的时候,发现自己有不少东西没学会,平时在学校虽说html也写了不少,但有好大一部分都 ...