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. 解决运行vue项目的报错This relative module was not found:

    运行vue项目出现这样的报错. This relative module was not found: * ../../assets/img/spot.png !./src/components/on ...

  2. opensuse12.3 桌面设置备忘录

    工作空间外观 窗口装饰 ghost deco2.2 光标主题 ringG 桌面主题 ghost 欢迎屏幕 login-scan-splash-cg 应用程序外观 风格 部件样式 Oxygen 颜色 g ...

  3. HTML <frameset>不同frame之间传值

    布局 左右30%--70%,点击左边的复选框,右边显示相应的反应. 代码 main2.html <html> <frameset cols="30%, 70%"& ...

  4. URAL 1252 ——Sorting the Tombstones——————【gcd的应用】

    Sorting the Tombstones Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I ...

  5. goto语句和标签

    goto 语句用于将执行流更改到标签处,虽然t-sql和pl/sql都提供了该语句,但是作为编程而言,我们不推荐使用此编程技术.要编写一个标签,应当在标识符后面加一个冒号.列如,下面示例使用goto语 ...

  6. Path类 操作文件类

    // Path类 IO命名空间 静态类 不能创建对象类名. string str =@"E:\C#程序设计基础入门教程\(第十一天)\122\22\nee.txt"; ////in ...

  7. 互联网轻量级框架SSM-查缺补漏第一天

    简言:工欲其事必先利其器,作为一个大四的准毕业生,在实习期准备抽空补一下基础.SSM框架作为互联网的主流框架,在会使用的基础上还要了解其原理,我觉得会对未来的职场会有帮助的.我特意的买了一本<J ...

  8. 当Activity出现Exception时是如何处理的？

    1.ActivityThread 2.PerformStop 在这里会调用mWindow.closeAllPanels(),从而关闭OptionMenu, ContextMenu.如果自己通过Wind ...

  9. Spring课程 Spring入门篇 4-5 Spring bean装配之基于java的容器注解说明--@Bean

    1 解析 2.1 @bean注解定义 2.2 @bean注解的使用 2 代码演练 2.1 @bean的应用不带name 2.2 @bean的应用带name   2.3 @bean注解调用initMet ...

  10. C#+ObjectArx CAD二次开发(2)

    前面开了一个头,这里添加几个功能的实现, //添加图层 private void LoadLayer() { Document acDoc = Application.DocumentManager. ...