由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了

单选按钮

【实现效果】

【实现过程】

body{

margin: 0;

font: 16px/20px "宋体";

}

.box{

width: 500px;

height: 100px;

line-height: 100px;

margin: 0 auto;

border: 1px solid black;

text-align: center;

}

.box label{

position:relative;

padding-left: 20px;

}

.box input{

visibility: hidden;

}

.box i{

position: absolute;

top: -2px;

left: -2px;

height: 19px;

width: 19px;

background: url('https://demo.xiaohuochai.site/radiobutton.gif') no-repeat -14px -18px;

}

.box label:hover{

color: red;

}

.box label:hover i{

background-position: -14px -118px;

}

.box label.selected i{

background-position: -14px -218px;

}

var oBox = document.getElementById('box');

var aLabel = oBox.getElementsByTagName('label');

for(var i = 0, leni = aLabel.length; i < leni; i++){

aLabel[i].onclick = function(){

for(var j = 0,lenj = aLabel.length; j < lenj; j++){

aLabel[j].removeAttribute('class');

}

this.className = 'selected';

}

}

多选按钮

【实现效果】

【实现过程】

body{

margin: 0;

font: 16px/20px "宋体";

}

.box{

width: 600px;

height: 100px;

line-height: 100px;

margin: 0 auto;

border: 1px solid black;

text-align: center;

}

.box label{

position:relative;

padding-left: 20px;

}

.box input{

visibility: hidden;

}

.box i{

position: absolute;

top: -2px;

left: -2px;

height: 19px;

width: 19px;

background: url('https://demo.xiaohuochai.site/checkbox.gif') no-repeat -14px -18px;

}

.box label:hover{

color: red;

}

.box label:hover i{

background-position: -14px -118px;

}

.box label.selected i{

background-position: -14px -218px;

}

var oBox = document.getElementById('box');

var aLabel = oBox.getElementsByTagName('label');

for(var i = 0, leni = aLabel.length; i < leni; i++){

aLabel[i].onclick = function(){

if(!this.className){

this.className = 'selected';

}else{

this.removeAttribute('class');

}

}

}

下拉列表

【实现效果】

【实现过程】

body{

margin: 0;

font: 16px/20px "宋体";

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

.box{

width: 300px;

height: 40px;

margin: 0 auto;

border: 1px solid black;

}

.box .show{

background-color: red;

line-height: 30px;

padding: 5px;

}

.box .show-area{

color: white;

vertical-align: middle;

}

.box .show-select{

position: relative;

display: inline-block;

vertical-align: middle;

width: 200px;

height: 28px;

border: 1px solid #999;

background-color: white;

text-indent: 20px;

cursor: pointer;

}

.box .show-selectAdd{

color: #999;

}

.box .show-select i{

position: absolute;

height: 0;

width: 0;

top: 0;

right: 0;

margin-top: 12px;

margin-right: 5px;

border: 5px solid transparent;

border-top-color: black;

}

.box .show-selectAdd i{

border: 5px solid transparent;

border-bottom-color: black;

margin-top: 8px;

}

.box .list{

border: 1px solid #dfdfdf;

border-top: none;

display: none;

}

.box .list-in{

height: 30px;

line-height: 30px;

text-indent: 74px;

border-bottom: 1px solid #dfdfdf;

cursor: pointer;

}

.box .list-in:hover{

color: red;

}

var oBox = document.getElementById('box');

var oDiv = oBox.getElementsByTagName('div')[0];

var oShow = oDiv.getElementsByTagName('span')[0];

var oUl = oBox.getElementsByTagName('ul')[0];

var aLi = oUl.getElementsByTagName('li');

//简单思路

//[1]点击oDiv时，默认文字为黑色，三角向上，变成文字为#999，三角向下；简化为增加一个show-selectAdd类名；oUl从隐藏变成显示

oDiv.onclick = function(e){

//阻止冒泡

e = e || event;

if(e.stopPropagation){

e.stopPropagation();

}else{

e.cancelBubble = true;

}

oShow.className = 'show-select show-selectAdd';

oUl.style.display = 'block';

}

//[2]点击oUl的li时，oUl从隐藏变成显示，文字和三角恢复到黑色和向上的默认样式；并且文字内容变成当前点击的li的内容

for(var i = 0,len=aLi.length; i < len;i++){

aLi[i].onclick = function(){

oShow.innerHTML = this.innerHTML + '';

}

}

//[3]点击box以外的其他部分时，oUl从隐藏变成显示，文字和三角恢复到黑色和向上的默认样式

document.onclick = function(){

this.getElementsByTagName('span')[0].className = 'show-select';

oUl.style.display = 'none';

}

一个不是计算机专业的理科生，转行学前端

如果你也有一个编程梦，这是咱们的前端学习QQ群：784-783-012

(在线学习，8个月时间，目前就业，广州工作，月薪16k)