代码：

  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>选择框样式</title>
  7.         <style>
  8.             label {
  9.                 font-size: 12px;
  10.                 cursor: pointer;
  11.             }
  12.  
  13.             label i {
  14.                 font-size: 12px;
  15.                 font-style: normal;
  16.                 display: inline-block;
  17.                 width: 12px;
  18.                 height: 12px;
  19.                 text-align: center;
  20.                 line-height: 12px;
  21.                 color: #fff;
  22.                 vertical-align: middle;
  23.                 margin: -2px 2px 1px 0px;
  24.                 border: #2489c5 1px solid;
  25.             }
  26.  
  27.             input[type="checkbox"],
  28.             input[type="radio"] {
  29.                 display: none;
  30.             }
  31.  
  32.             input[type="radio"]+ i {
  33.                 border-radius: 7px;
  34.             }
  35.  
  36.             input[type="checkbox"]:checked+ i,
  37.             input[type="radio"]:checked+ i {
  38.                 background: #2489c5;
  39.             }
  40.  
  41.             input[type="checkbox"]:disabled+ i,
  42.             input[type="radio"]:disabled+ i {
  43.                 border-color: #ccc;
  44.             }
  45.  
  46.             input[type="checkbox"]:checked:disabled+ i,
  47.             input[type="radio"]:checked:disabled+ i {
  48.                 background: #ccc;
  49.             }
  50.         </style>
  51.     </head>
  52.  
  53.     <body>
  54.         <label><input type="checkbox"><i>✓</i>复选框</label><br>
  55.         <label><input type="checkbox" checked><i>✓</i>复选框</label><br>
  56.         <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
  57.         <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>
  58.         <label><input type="radio" name="abc"><i>✓</i>单选框</label><br>
  59.         <label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>
  60.         <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>
  61.         <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>
  62.     </body>
  63.  
  64. </html>

效果：

重置 radio 和 checkbox 的样式的更多相关文章

  1. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

  2. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  3. 自定义radio、checkbox的样式

    input标签中的radio和checkbox是很表单中常用的类型,大多时候,默认样式并不能满足我们的需求,所以有了此篇. 自定义样式,由此开启: html: <div class=" ...

  4. CSS3 radio 或checkbox 自定义 样式

    .style-radio {position:relative;width:15px;height:15px;outline:none;} .style-radio:after {position:a ...

  5. 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

  6. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  7. 微信小程序修改radio和checkbox的默认样式和图标

    wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? ...

  8. radio 和checkbox与文字对齐问题

    今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...

  9. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

随机推荐

  1. [NOI2011]阿狸的打字机 --- AC自动机 + 树状数组

    [NOI2011] 阿狸的打字机 题目描述: 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. 打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母.经阿狸研究发现, ...

  2. nginx fastcgi_buffers to an upstream response is buffered to a temporary file

    fastcgi_buffers 16 16k; 指定本地需要用多少和多大的缓冲区来缓冲FastCGI的应答,如上所示,如果一个php脚本所产生的页面大小为256k,则会为其分配16个16k的缓冲区来缓 ...

  3. Android背后的设计思想——功能共享机制

    Android的系统设计,与别的智能手机操作系统有很大区别,甚至在以往的任何操作系统里,很难找到像Android这样进行全面地系统级创新的操作系统.从创新层面上来说,Android编程上的思想和支持这 ...

  4. Google图片和NASA 网站图片的爬虫

    1.根据关键字爬取NASA网站上的图片 首先针对需要爬取的网站进行分析,输入关键字查找需要的内容 通过关键字请求,网页每次会加载20张的缩略图,分析网页源码能够很容易的找到缩略图的url: 然后再点开 ...

  5. Map按照数值进行排序

    public static Map<String, Integer> sortMapByValue(Map<String, Integer> oriMap) { if (ori ...

  6. hihocoder1320 160周 压缩字符串

    hihocoder1320 题目链接 思路: dp解法.用map[i][j]表示从第i个开始到第j个的字串的best压缩长度.(包括i,j,两端闭合). 用k表示i,j中的一点. 用zip()表示压缩 ...

  7. Object-C编程基础总结：

    1,nil,NULL,NSNull:nil用来给对象附值,object—c里允许对象为空,空对象也可以接受消息.但是不允许指针为空,NULL是给任何指针附值的.所以NULL只在C或C++里才用.NSN ...

  8. 降压转换器 (Buck)

    降压转换器 (Buck) 切换式降压转换器 (Buck) 能提供高效率.高度弹性.高压降比.高负载能力的降压转换. 多数降压转换器 (Buck) 包含上桥 MOSFET 和同步整流 MOSFET,根据 ...

  9. SEAndroid安全机制简要介绍和学习计划

    与iOS相比.Android最被人诟病的是其流畅性和安全性. 然而,从4.0開始,Android不遗余力地改善其流畅性. 特别是在即将公布的L版本号中,用ART替换了Dalvik,相信会越来越流畅.至 ...

  10. [SQL基础]入门

    目录 什么是SQL? SQL能做什么? RDBMS SQL常见数据类型 SQL语法 什么是SQL? 结构化查询语言(Structured Query Language)简称SQL. 结构化查询语言是一 ...