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

<!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. (原创)用.NET Core实现微信自动回复工具(上篇)

    全文 没有视频的介绍显得尤为空白仓促.所以,如果你不赶时间,看看视频先 → → http://wexin.fuyue.xyz/Resource/Video/wechatTool.mp4 ← ← 功能列 ...

  2. SpringBoot整合Mongodb4.0

    本品文章只做学习使用: 安装mongodb推荐博客:https://www.jianshu.com/p/a75e26e5f635 1:如何在外网环境下开放mongodb 服务器版本:centos7.6 ...

  3. Redis-第十章节-链表

    目录 数组和链表 链表 对比 总结 1.数组和链表 数组: 数组会在内存中开辟一块连续的空间存储数据,这种存储方式有利也有弊端.当获取数据的时候,直接通过下标值就可以获取到对应的元素,时间复杂度为O( ...

  4. deepin-terminal改造之路

    目录 1. 背景介绍 2. 下载源码 3. 依赖检查及安装 4. 改造之路 4.1 终端透明度快捷键 4.1.1 设置面板增加选项内容 4.1.2 添加配置解析内容 4.1.3 功能实现 4.1.4 ...

  5. 敏捷史话（八）：敏捷的破局之道——Martin Fowler

    在 Martin Fowler 的世界里,任何事情都有最优解. 1963年,Martin 出生于英格兰的沃尔索尔(Walsall),也在同样位于沃尔索尔的玛丽女王文法学校中接受中等教育.在这里的乡村中 ...

  6. Kubernetes Container lifecycle hooks

    简介 在kubernetes中,容器hooks旨在解决服务进程启动与停止时的一些优雅操作需求.比如说进程停止时要给进程一个清理数据的时间,保证服务的请求正常结束,而不是强行中断服务的运行,这样在生产环 ...

  7. PAT-1144（The Missing Number）set的使用，简单题

    The Missing Number PAT-1144 #include<iostream> #include<cstring> #include<string> ...

  8. RPC基础以及造一个RPC的轮子需要注意些什么

    RPC基础以及造一个RPC的轮子需要注意些什么 前言 rpc即远程过程调用,是分布式系统常用的通信方法.远程可以是在一台机器上的不同进程或在不同一个机器上的不同进程.rpc更看重速度,像调用本地方法一 ...

  9. JAVA常用的集合转换

    在Java应用中进行集合对象间的转换是非常常见的事情,有时候在处理某些任务时选择一种好的数据结构往往会起到事半功倍的作用,因此熟悉每种数据结构并知道其特点对于程序员来说是非常重要的,而只知道这些是不够 ...

  10. js_笔记_8月7日记录_活动对象_作用域链_按值传递

    活动对象:简单说就是这个函数的参数和显示声明的变量或函数. 函数内接受的参数实际是创建了一个局部变量:[形参名] = [传进来的值],js的函数传参只传值. 作用域链:执行流进入一个函数,会先创建出作 ...