表单美化在前端开发中经常使用到，CSS3中有很多对我们有利的伪类和属性选择器，今天主要来说说使用属性选择器和label来进行美化，不使用伪类。
首先，先来看下美化后的相关效果：
下面我们来看看实现的思想：
1、首先隐藏input
2、在label中设置背景即可
首先我们要先了解一下几个关于浏览器的知识点：
浏览器中，chrome在input的focus的时候会自动增加一个蓝色的外边框，以及select下拉，在Firefox和chrome下的显示都不一样，如下图chrome中的显示：
出现以上的问题，我们需要通过以下几个属性来解决：
select的小三角样式既然不一样，那么我们就将其删除，使用我们自己设定的图片或者svg，删除小三角的代码如下：
-webkit-appearance: none;
-webkit-tap-highlight-color: #fff;
appearance:none;
第二个，在chrome中出现的蓝色边框，可以直接设置outline的值为none来去除：
outline: none;
第三个问题，chrome中自动填充后，input背景会自动变为黄色的，如果input没有使用背景图片的话，那可以通过下面的css解决这个问题：
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
如果是使用的背景图片，那么上面这段代码将会覆盖了背景图片。因此我们就需要禁止input的自动填充功能了。直接在input后面增加一个属性autocomplete=”off”即可。而在本列中，我是使用背景图片的方法，因此只能直接牺牲自动完成的功能了。
点击复选框和单选框的过程中我使用了相应的css3动画。另外input[text]中我也使用了css3的过渡效果。
解决了以上3个问题，我们就可以开始美化input了
看代码:
Radio美化
CheckBox美化
input text
CSS3代码：
h1{
font-size: 28px;
}
.radio_all{
width: 80%;
margin: 10px auto;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio_all input[type='radio']{
display: none;
}
.radio_all input[type='radio'] + label{
display: inline-block;
background: url("svg/nocheck_16.svg") left center no-repeat;
cursor: pointer;
padding: 0 5px 0 18px;
margin-right: 10px;
}
.radio_all input[type='radio']:checked + label{
background: url("svg/check_16.svg") left center no-repeat;
-webkit-animation: bounce 0.3s;
-moz-animation: bounce 0.3s;
animation: bounce 0.3s;
}
.checkbox{
width: 80%;
margin: 10px auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox input[type='checkbox']{
display: none;
}
.checkbox input[type='checkbox'] + label{
left: 0;
display: inline-block;
background: url("svg/checkbox_16.svg") left center no-repeat;
cursor: pointer;
z-index: 2;
padding: 0 5px 0 18px;
}
.checkbox input[type='checkbox']:checked + label{
background: url("svg/icheckbox_16.svg") left center no-repeat;
-webkit-animation: bounce 0.3s;
-moz-animation: bounce 0.3s;
animation: bounce 0.3s;
}
.select{
width: 80%;
margin: 10px auto;
}
.select .i-select{
display: inline-block;
vertical-align: middle;
position: relative;
text-align: left;
/*删除小右侧三角*/
-webkit-appearance: none;
-webkit-tap-highlight-color: #fff;
appearance:none;
outline: 0;
/*删除小右侧三角 end*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border:1px solid #DDD;
border-radius: 5px;
background: url("svg/select.svg") #EEE 98% center no-repeat;
padding: 10px 20px 10px 10px;
font-size: 16px;
overflow:hidden;
}
.select .i-select option{
padding: 10px;
border: 0;
}
.select .i-select option[selected]{ font-weight:bold; background: darkcyan}
.select .i-select option:nth-child(even) { background-color:#F2F2F2; }
.input-text{
width: 80%;
margin: 0 auto;
}
.input-text label{
text-align: justify;
word-spacing:8px;
letter-spacing: 1px;
width: 60px;
display: inline-block;
}
.input-text input[type='text']{
width: 200px;
border: 1px solid navajowhite;
padding: 10px 10px 10px 25px;
border-radius: 5px;
background: url("svg/account.svg") 6px center no-repeat;
}
.input-text input[type='text']:focus{
border: 1px solid salmon;
outline: none;
transition: all .3s;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes bounce {
0%, 100% {
-moz-transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}