經常使用的input樣式美化。

在日常的網站開發中，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 }

純屬原創，如若轉載，請聲明出處。