常用的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.οnclick=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].οnclick=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 }

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

转载于:https://www.cnblogs.com/programerHuan/p/4857407.html