纯css3替换CheckBox复选框和radio单选框的默认样式

在项目开发中我们经常会用到表单元素，而我们做出来的页面往往是要让用户看的，所以需要对表单默认的样式进行优化，这里以复选框 CheckBox 和单选框 radio 为例。自从有了 css3 这一切都变得那么简单，实现原理很简单，就是利用 input 与 label 相关联，对 label 进行美化并使其覆盖掉原本的 input，并利用旋转属性 transform 实现复选框中的那个“√”，当然也可以使用背景图片。接下来内容将给大家介绍两种实现方式，原理也大致相同，所以学会一种即可举一反三。网上也有好多相关例子，也有插件实现方法，但是本博主还是喜欢原生的实现方式，最后我也会给大家提供比较好的插件来满足大家不同的需求，最重要的还是想让大家学习插件里的实现原理方法，好了，开始步入正题。

代码没有那么难，但是有一些基础性的东西，需要我们了解一下，照顾一下新同学。

相邻兄弟选择器 “+”

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

HTML 代码：

<h1>This is a heading.</h1>
<p>This is paragraph.</p>

效果：

transform 属性

Transform 属性应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法

transform: none|transform-functions;

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

更多有关 transform 属性的学习请看《CSS3 变形与动画（上）》和《CSS3 变形与动画（下）》

方法一：css3 改变复选框和单选框的样式

HTML 代码：

<div class="con">
	<h2>复选框:</h2>
	<span class="check_box">
       <input type="checkbox" id="check_1">
       <label for="check_1"></label>
       <em>苹果</em>
 	</span>
	<br><br>
	<span class="check_box">
       <input type="checkbox" id="check_2">
       <label for="check_2"></label>
       <em>香蕉</em>
 	</span>
	<br><br>
	<h2>单选框:</h2>
	<span class="radio_box">
       <input type="radio" id="radio_1" name="radio" checked>
       <label for="radio_1"></label>
       <em>篮球</em>
 	</span>
	<br><br>
	<span class="radio_box">
       <input type="radio" id="radio_2" name="radio">
       <label for="radio_2"></label>
       <em>电影</em>
 	</span>
</div>

css 代码：

body {
	font: menu;
	font-size: 16px;
}

.con {
	width: 1000px;
	margin: 0 auto;
}
h2 {
	font-weight: normal;
	color: #0CC;
}

em {
	font-style: normal;
}
/*复选*/

.check_box {
	display: inline-block;
	position: relative;
}

.check_box label {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid #cacaca;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.check_box label:hover {
	border: 2px solid #f78642;
}

.check_box label:after {
	content: '';
	width: 8px;
	height: 4px;
	position: absolute;
	top: 4px;
	left: 3px;
	border: 2px solid #cacaca;
	border-top: none;
	border-right: none;
	opacity: 0.4;
	transform: rotate(-45deg);
	/*-webkit-transform:rotate(-45deg);*/
}

.check_box label:hover:after {
	border: 2px solid #f78642;
	border-top: none;
	border-right: none;
}

.check_box input:checked+label {
	border: 2px solid #f78642;
}

.check_box input:checked+label:after {
	opacity: 1;
	border: 2px solid #f78642;
	border-top: none;
	border-right: none;
}

.check_box em {
	margin: 0 0 0 5px;
}
/*单选*/

.radio_box {
	display: inline-block;
	position: relative;
}

.radio_box label {
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid #ef4949;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.radio_box input:checked+label:after {
	content: '';
	width: 9px;
	height: 9px;
	position: absolute;
	top: 3px;
	left: 3px;
	background: #ef4949;
	border-radius: 50%;
}

.check_box em {
	margin: 0 0 0 5px;
}

对于 IE8 以下嘛，当然不支持了，只能用默认样式了，所以用条件注释隐藏掉 label 吧。

<!--[if lte IE 8]>
<style>
.check_box label,.radio_box label{display:none;}
</style>
<![endif]-->

效果图：

方法二：纯 css3 替换 CheckBox 复选框和 radio 单选框的默认样式

HTML 代码：

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

css 代码：

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;}

效果图：

插件方法

一、css3 bootstrap 单选/复选框美化代码 下载[download id=”1203″]

css3 基于 bootstrap 制作单选框和复选框按钮美化，这是一款非常实用的表单按钮美化代码。

二、jQuery 单选框和复选框美化标签选择代码 下载[download id=”1206″]

以上内容就是今天关于 css3 替换 CheckBox 复选框和 radio 单选框的默认样式的所有方法，总有一款适合你。