标签：
在平常的网站开发中，css，html提供的关于<input type ="checkbox"/>或者<input type = "file"/>的样式不是我们想要的，那么现在我们来介绍一个小技巧，来设置成我们想要的样式。
第一个input框的美化,原理是用一个a标签包裹一个input标签，让input溢出，设置input标签的透明度为0，然后设置a标签就可以设置显示的样式了
DOM结构：
<a href="javascript:void(0)" class="up-file"> <input type="file" value="" />选择图片 </a>
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 <div class="select-pro" id="promise1"> 2 <label for="">承诺本作品原创作者</label> 3 </div>
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.onclick=function(){ 23 three.style.backgroundPositionY = "-25px"; 24 two.style.backgroundPositionY = "0"; 25 } 26 27 for(var i = 0;i<len;i++){ 28 identi[i].index=0; 29 identi[i].onclick=function(){ 30 if(this.index % 2 == 0){ 31 this.style.backgroundPositionY = "-77px"; 32 } 33 else{ 34 this.style.backgroundPositionY = "-107px"; 35 } 36 this.index++; 37 } 38 } 39 makesure.onclick = function(){ 40 if(Count3 % 2 == 0){ 41 makesure.style.backgroundPositionY="67%"; 42 }else{ 43 makesure.style.backgroundPositionY = "90%"; 44 } 45 Count3++; 46 }
纯属原创，如若转载，请声明出处。
标签：
原文地址：http://www.cnblogs.com/programerHuan/p/4857407.html
