纯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 单选框的默认样式的所有方法，总有一款适合你。

以上关于纯css3替换CheckBox复选框和radio单选框的默认样式的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。