最重要的一点，隐藏选择框本身。不多说了，上代码：

<!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>

效果如下：

原创：纯CSS美化单复选框（checkbox、radio）的更多相关文章

  1. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  2. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  3. 8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...

  4. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  5. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  6. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  7. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  8. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  9. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. Windows定时重新启动（适用于server 2012 r2）

    直接看链接吧:https://jingyan.baidu.com/article/2d5afd69dd8e9d85a2e28eb7.html 开始菜单,找到"计划任务程序"; 2 ...

  2. hutool的DateUtil工具类

    1.0.DateUitl(日期时间) 0)坐标 <dependency> <groupId>cn.hutool</groupId> <artifactId&g ...

  3. 翻译：《实用的Python编程》02_05_Collections

    目录 | 上一节 (2.4 序列) | 下一节 (2.6 列表推导式) 2.5 collections 模块 collections 模块为数据处理提供了许多有用的对象.本部分简要介绍其中的一些特性. ...

  4. Python镜像源集合——镜像源更改方法

    python在线安装库时会较慢,那是因为python的默认镜像源在国外,因此会慢:而国内有很多可以用的python镜像源,将python镜像源更改为国内的,则可以大大加快python库的安装速度. 1 ...

  5. Mysql 高可用(MHA)-读写分离(Atlas)-分布式架构(Mycat)

    Mysql 高可用(MHA)-读写分离(Atlas) 1. 搭建主从复制(一主两从) 1.1 准备环境 1 主库:10.0.0.51/db01 2 从库:10.0.0.52/db02,10.0.0.5 ...

  6. matplotlib工具栏源码探析三（添加、删除自定义工具项）

    转: matplotlib工具栏源码探析三(添加.删除自定义工具项) matplotlib工具栏源码探析二(添加.删除内置工具项)探讨了工具栏内置工具项的管理,除了内置工具项,很多场景中需要自定义工具 ...

  7. 【转载】关于grad_tensors的解惑

    转载:https://www.cnblogs.com/marsggbo/p/11549631.html 平常都是无脑使用backward,每次看到别人的代码里使用诸如autograd.grad这种方法 ...

  8. java常见面试题3：线程间通信

    写两个线程,一个线程打印 1~52,另一个线程打印字母A-Z. 打印顺序为12A34B56C78D--5152Z.要求用线程间的通信. 代码清单: class Printer { private in ...

  9. POJ_2387 Til the Cows Come Hom 【最短路】

    一.题目 POJ2387 二.分析 Bellman-Ford算法 该算法是求单源最短路的,核心思想就是不断去更新到起点的最短距离,更新的前提是没有负边.如果有负边需要手动控制循环次数. Dijkstr ...

  10. Vue 全家桶学习资源(转)

    companion: React 全家桶学习资源(持续更新) 下面整理了一些关于Vue以及Vue衍生的学习资源: 官网文档 官网API ECMAScript 6 入门 30分钟掌握ES6/ES2015 ...