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

<!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. 大话Spark(5)-三图详述Spark Standalone/Client/Cluster运行模式

    之前在 大话Spark(2)里讲过Spark Yarn-Client的运行模式,有同学反馈与Cluster模式没有对比, 这里我重新整理了三张图分别看下Standalone,Yarn-Client 和 ...

  2. 《C++ Primer》笔记 第13章 拷贝控制

    拷贝和移动构造函数定义了当用同类型的另一个对象初始化本对象时做什么.拷贝和移动赋值运算符定义了将一个对象赋予同类型的另一个对象时做什么.析构函数定义了当此类型对象销毁时做什么.我们称这些操作为拷贝控制 ...

  3. Hi3559AV100外接UVC/MJPEG相机实时采图设计（一）:Linux USB摄像头驱动分析

    下面将给出Hi3559AV100外接UVC/MJPEG相机实时采图设计的整体流程,主要实现是通过V4L2接口将UVC/MJPEG相机采集的数据送入至MPP平台,经过VDEC.VPSS.VO最后通过HD ...

  4. Java垃圾回收机制详解

    前言 Java 相比 C/C++ 最显著的特点便是引入了自动垃圾回收 (下文统一用 GC 指代自动垃圾回收),它解决了 C/C++ 最令人头疼的内存管理问题,让程序员专注于程序本身,不用关心内存回收这 ...

  5. python工业互联网应用实战7—业务层

    本章我们演示代码是如何"进化"的,实战的企业日常开发过程中,系统功能总伴随着业务的不断增加,早期简单的代码慢慢的越来越复杂,敏捷编程中的"禅"--简单设计.快速 ...

  6. JVM 中的异常

    StackOverflowError 在 JVM 的栈中,如果线程要创建的栈帧大小大于栈容量的大小时,就会抛出 java.lang.StackOverflowError.比如下面的代码 public ...

  7. 进阶Java多线程

    一.多线程创建方式 1.1.继承Thread类创建线程类 1.实现步骤 定义一个继承Thread类的子类,并重写该类的run()方法: 创建Thread子类的实例,即创建了线程对象: 调用该线程对象的 ...

  8. Python之基础算法介绍

    一.算法介绍 1. 算法是什么 算法是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制.也就是说,能够对一定规范的输入,在有限时间内获得所要求的输 ...

  9. 【图像处理】OpenCV+Python图像处理入门教程（五）阈值处理

    这篇随笔介绍使用OpenCV进行图像处理的第五章 阈值处理. 5  阈值处理 阈值是指像素到达某临界值.阈值处理表示像素到达某临界值后,对该像素点进行操作和处理. 例如:设定一幅图像素阈值为200,则 ...

  10. MUV LUV UNLIMITED Gym - 102361K

    题目链接:https://vjudge.net/problem/Gym-102361K 题意:两个人轮流取树叶,最后没有树叶取的人输. 思路:求出所有树叶所在链的长度即可,如果都为偶数先手必败,否则先 ...