常用的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代码:

.up-file {
    padding: 4px 10px;
    height: 40px;
    width: 240px;
    text-align: center;
    line-height: 40px;
    position: relative;
    cursor: pointer;
    background: #44bbff;
    color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.up-file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

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

<div class="select-pro" id="promise1">
    <label for="">承诺本作品原创作者</label>
</div>

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

var one = document.getElementById("promise1").getElementsByTagName("label")[0];
var two = document.getElementById("two").getElementsByTagName("label")[0];
var three = document.getElementById("address").getElementsByTagName("label")[0];
var identi = document.getElementById("identi").getElementsByTagName("div");
var makesure = document.getElementById("makesure");
var Count1 = 0;
var Count2 = 0;
var Count3 = 0;
var len = identi.length;
one.onclick = function() {
    if (Count1 % 2 == 0) {
        one.style.backgroundPositionY = "67%";
    } else {
        one.style.backgroundPositionY = "90%";
    }
    Count1++;
}
two.onclick = function(){
    two.style.backgroundPositionY = "-25px";
    three.style.backgroundPositionY = "0";
}
three.onclick=function(){
    three.style.backgroundPositionY = "-25px";
    two.style.backgroundPositionY = "0";
}

for(var i = 0;i<len;i++){
    identi[i].index=0;
    identi[i].onclick=function(){
        if(this.index % 2 == 0){
            this.style.backgroundPositionY = "-77px";
        }
        else{
            this.style.backgroundPositionY = "-107px";
        }
        this.index++;
    }
}
makesure.onclick = function(){
    if(Count3 % 2 == 0){
    makesure.style.backgroundPositionY="67%";
    }else{
        makesure.style.backgroundPositionY = "90%";
    }
    Count3++;
}

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