表单美化在前端开发中经常使用到,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);
}
}