代码：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>选择框样式</title>

        <style>

            label {

                font-size: 12px;

                cursor: pointer;

            }

            label i {

                font-size: 12px;

                font-style: normal;

                display: inline-block;

                width: 12px;

                height: 12px;

                text-align: center;

                line-height: 12px;

                color: #fff;

                vertical-align: middle;

                margin: -2px 2px 1px 0px;

                border: #2489c5 1px solid;

            }

            input[type="checkbox"],

            input[type="radio"] {

                display: none;

            }

            input[type="radio"]+ i {

                border-radius: 7px;

            }

            input[type="checkbox"]:checked+ i,

            input[type="radio"]:checked+ i {

                background: #2489c5;

            }

            input[type="checkbox"]:disabled+ i,

            input[type="radio"]:disabled+ i {

                border-color: #ccc;

            }

            input[type="checkbox"]:checked:disabled+ i,

            input[type="radio"]:checked:disabled+ i {

                background: #ccc;

            }

        </style>

    </head>

    <body>

        <label><input type="checkbox"><i>✓</i>复选框</label><br>

        <label><input type="checkbox" checked><i>✓</i>复选框</label><br>

        <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>

        <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>

        <label><input type="radio" name="abc"><i>✓</i>单选框</label><br>

        <label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>

        <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>

        <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>

    </body>

</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. scanf输入字符串相关

    http://blog.csdn.net/liuhui_8989/article/details/13398793   补充..输入s的时候不要把变量设置成string类型,设置成char数组类型.. ...

  2. python3-开发进阶Flask的基础(4)

    今日内容: 上下文管理:LocalProxy对象 上下文管理:  请求上下文: request/session   app上下文:app/g 第三方组件:wtforms       1.使用      ...

  3. bzoj 2154

    收获: 1.当一个东西的取值范围很小时,或者感觉它很麻烦时,就枚举它 2.熟悉mobius函数.euler函数的和函数,以及euler函数用mobius函数的表示. 3.下取整分块理解更深了. /** ...

  4. DP练习 最长上升子序列nlogn解法

    openjudge 百练 2757:最长上升子序列 总时间限制:  2000ms 内存限制:  65536kB 描述 一个数的序列bi,当b1 < b2 < ... < bS的时候, ...

  5. 27.prim算法  最优布线问题(wire.cpp)

    [例4-10].最优布线问题(wire.cpp) [问题描述] 学校有n台计算机,为了方便数据传输,现要将它们用数据线连接起来.两台计算机被连接是指它们间有数据线连接.由于计算机所处的位置不同,因此不 ...

  6. sqlserver -- 学习笔记（二）“SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问”解决方法

    将数据表导出到excel时出现下面错误: SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问,因为此组件已作为此服务器安全配置的一部分而 ...

  7. python开发_count()

    python中的count()函数,从字面上可以知道,他具有统计功能 下面来看看具体的demo: 功能:读取一个文件'c:\\test.txt',统计出该文件中出现字符'a'的次数 #python o ...

  8. python开发_搜索本地文件信息写入文件

    功能:#在指定的盘符,如D盘,搜索出与用户给定后缀名(如:jpg,png)相关的文件 #然后把搜索出来的信息(相关文件的绝对路径),存放到用户指定的 #文件(如果文件不存在,则建立相应的文件)中 之前 ...

  9. leetcode644. Maximum Average Subarray II

    leetcode644. Maximum Average Subarray II 题意: 给定由n个整数组成的数组,找到长度大于或等于k的连续子阵列,其具有最大平均值.您需要输出最大平均值. 思路: ...

  10. Apple Developer申请成功

    上周日白天,我去申请了Apple Developer.我先是在百度上浏览了一些经验教程,但是点进苹果开发者官网时却发现完全不是那么一回事.盖因它的页面经常在变,如同现在苹果在主推tvOS这个对中国用户 ...