纯CSS3来自定义单选框radio与复选框checkbox

单选框（radio）自定义样式

//html

<input type="radio" />

//css部分

<style>

/**

* 单选框自定义样式

**/

input[type=radio]{

/*去除浏览器默认样式*/

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

/*自定义样式*/

position: relative;

display: inline-block;

vertical-align: top;

width: 20px;

height: 20px;

border: 1px solid #00bfff;

outline: none;

cursor: pointer;

/*设置为圆形，看起来是个单选框*/

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

}

/**

* 单选框选中之后的样式

**/

input[type=radio]:after{

content: '';

position: absolute;

width: 12px;

height: 12px;

display: block;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

background: #00bfff;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

-webkit-transform: scale(0);

-moz-transform: scale(0);

transform: scale(0);

/*增加一些动画*/

-webkit-transition : all ease-in-out 300ms;

-moz-transition : all ease-in-out 300ms;

transition : all ease-in-out 300ms;

}

input[type=radio]:checked:after{

-webkit-transform: scale(1);

-moz-transform: scale(1);

transform: scale(1);

}

</style>

appearance 属性介绍

appearance是css3的属性，他的意思是使得标签的样式像他设定的参数一样；

他总共有7个参数；

normal->> 将元素呈现为常规元素。

icon->> 将元素呈现为图标（小图片）。

window->> 将元素呈现为视口。

button->> 将元素呈现为按钮。

menu->> 将元素呈现为一套供用户选择的选项。

field->> 将元素呈现为输入字段。

none->> 去除浏览器默认样式

:checked伪类介绍

:checked同样是css3中的一个伪类，他的作用是某个标签被选中时来使用的，使用方法和:hover :active :link这些伪类一样；

上面我在radio后面加了一个伪类：after，他要稍微比定义的单选框要小点，这样显示出来更加美观一点，在未选中之前让他scale(0),然后配合动画，在选中的时候scale(1)，这样就有一个渐变填充的动画了；

那么radio的自定义样式就这样了，最后呈现的样式如下图：

复选框(checkbox)自定义样式

/**

* html代码

**/

<input type="checkbox" />

/**

* css代码

**/

<style>

input[type=checkbox]{

margin: 50px;

/*同样，首先去除浏览器默认样式*/

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

/*编辑我们自己的样式*/

position: relative;

width: 20px;

height: 20px;

background: transparent;

border:1px solid #00BFFF;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

outline: none;

cursor: pointer;

}

input[type=checkbox]:after{

content: '√';

position: absolute;

display: block;

width: 100%;

height: 100%;

background: #00BFFF;

color: #fff;

text-align: center;

line-height: 18px;

/*增加动画*/

-webkit-transition: all ease-in-out 300ms;

-moz-transition: all ease-in-out 300ms;

transition: all ease-in-out 300ms;

/*利用border-radius和opacity达到填充的假象，首先隐藏此元素*/

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

opacity: 0;

}

input[type=checkbox]:checked:after{

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

opacity: 1;

}

</style>

写法和radio思路一致，首先都是去除浏览器样式，然后自定义样式，这里填充的那种动画，就是利用渐现和圆弧填充为四个角的这么个思路，其实css还是有很多地方挺有意思的，大家平时多挖掘就会发现了；

最后样式如下：

再来看一种开关模式的复选框；

input[type=checkbox]{

/*同样，首先去除浏览器默认样式*/

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

/*编辑我们自己的样式*/

position: relative;

background: #fff;

border: 1px solid #00BFFF;

width: 56px;

height: 28px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

/*增加动画*/

-webkit-transition: all ease-in-out 300ms;

-moz-transition: all ease-in-out 300ms;

transition: all ease-in-out 300ms;

outline: none;

cursor: pointer;

}

input[type=checkbox]:after{

content: 'off';

position: absolute;

left: 2px;

top: 2px;

display: block;

width: 22px;

height: 22px;

background: #00BFFF;

color: #fff;

text-align: center;

line-height: 22px;

/*增加动画*/

-webkit-transition: all ease-in-out 300ms;

-moz-transition: all ease-in-out 300ms;

transition: all ease-in-out 300ms;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

font-size: 12px;

}

input[type=checkbox]:checked{

background: #00BFFF;

}

input[type=checkbox]:checked:after{

content: 'on';

left: 30px;

background: #fff;

color: #00BFFF;

}

这里就是对上面普通的复选框稍微做了一些改变，首先宽度增大，自身增加一个动画，不然背景变化没有渐变；

然后伪元素位置根据选中和未选中来确定left的值和content中的值就是图中的on与off的转变；

最后样子见下图：