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. Python学习 day06

    一.== 和 is ==  比较的是值 is   比较的是地址 id()  --  返回对象的内存地址 例: 赋值操作是将地址赋给变量 Python 中会实现创建一个小型的整形池,范围为 [-5,25 ...

  2. crontab -e

    crontab -e可以配置定时任务 0 */3 * * * cd /root/find && nohup qbittorrent-nox --webui-port=7070 & ...

  3. easyUI--datagrid 实现按键控制( enter tab 方向键 )

    1.表格定义时加上 onClickCell: onClickCell,2.定义列时加入编辑器3.引入 key.js 即可使用 enter 键 或者向下箭头 选中单元格下移 选中单元格上移 tab键 选 ...

  4. Thinkphp基于规则的Auth权限认证类

      PS:onethink是基于该权限认证类实现,Auth类作为官方类库,在Library\Think里面. 其实Auth类也是基于角色访问控制RBAC扩展的,具体到节点的权限校验方式还是需要根据业务 ...

  5. (转)Linux基础------Shell数值计算的几种方法

    Linux基础------Shell数值计算的几种方法 原文:http://blog.csdn.net/fu_wayne/article/details/21620639 在Linux下总会遇到数值计 ...

  6. 进入保护模式（一）——《x86汇编语言：从实模式到保护模式》读书笔记12

    之前已经做了一些理论上的铺垫,这次我们就可以看代码了. 一.代码清单 ;代码清单11-1 ;文件名:c11_mbr.asm ;文件说明:硬盘主引导扇区代码 ;创建日期:2011-5-16 19:54 ...

  7. Unity 基础

    Unity 基础是unity入门的关键.他将讲解Unity的界面, 菜单项,使用资源,创设场景,并发布版本. 当你读完这段,你将理解unity是怎么工作的,如何有效地使用它,并且完成一个基本的游戏. ...

  8. spring+springmvc+mybatis 开发JAVA单体应用

    myshop 概述 myshop项目是根据视频教程 Java 单体应用 做的一个练习项目,目前完成了登录功能.用户管理.类别管理后续有时间会继续做其它的功能.趁着双11花了99元一年买了台阿里云服务器 ...

  9. VS 游戏:推箱子&对战游戏

    推箱子 //只做了两关 class Program { static void Main(string[] args) { ; ; ; ; ; ; ; #region 地图绘制 , , ] { { { ...

  10. 数据分析核心包——pandas

    一.pandas简介 pandas是一个强大的Python数据分析的工具包,是基于NumPy构建的. 1.pandas的主要功能 (1)具备对其功能的数据结构DataFrame.Series (2)集 ...