在平常的网站开发中，css，html提供的关于<input type ="checkbox"/>或者<input type = "file"/>的样式不是我们想要的，那么现在我们来介绍一个小技巧，来设置成我们想要的样式。

第一个input框的美化,原理是用一个a标签包裹一个input标签，让input溢出，设置input标签的透明度为0，然后设置a标签就可以设置显示的样式了

DOM结构：

   选择图片

css代码:

1 .up-file { 2     padding: 4px 10px; 3     height: 40px; 4     width: 240px; 5     text-align: center; 6     line-height: 40px; 7     position: relative; 8     cursor: pointer; 9     background: #44bbff;10     color: #FFFFFF;11     border: 1px solid #ddd;12     border-radius: 4px;13     overflow: hidden;14     display: inline-block;15     *display: inline;16     *zoom: 1;17 }18 .up-file input {19     position: absolute;20     font-size: 100px;21     right: 0;22     top: 0;23     opacity: 0;24     filter: alpha(opacity=0);25     cursor: pointer;26 }

第二个的话，需要涉及到js的功能，其实我们看到的并不是checkbox，而是我们点击的时候将其背景图片位置改变，看上去就像是美化了一样

1 
     
      2     
      承诺本作品原创作者3 
     

1 .select-pro {2     padding-left: 10px;3     background: url(../img/icon-important.png)no-repeat;4     background-position: 0 center;5 }

1 var one = document.getElementById("promise1").getElementsByTagName("label")[0]; 2 var two = document.getElementById("two").getElementsByTagName("label")[0]; 3 var three = document.getElementById("address").getElementsByTagName("label")[0]; 4 var identi = document.getElementById("identi").getElementsByTagName("div"); 5 var makesure = document.getElementById("makesure"); 6 var Count1 = 0; 7 var Count2 = 0; 8 var Count3 = 0; 9 var len = identi.length;10 one.onclick = function() {11     if (Count1 % 2 == 0) {12         one.style.backgroundPositionY = "67%";13     } else {14         one.style.backgroundPositionY = "90%";15     }16     Count1++;17 }18 two.onclick = function(){19     two.style.backgroundPositionY = "-25px";20     three.style.backgroundPositionY = "0";21 }22 three.οnclick=function(){23     three.style.backgroundPositionY = "-25px";24     two.style.backgroundPositionY = "0";25 }26 27 for(var i = 0;i

纯属原创，如若转载，请声明出处。