设置input的样式

css中的 ” 七层重叠法 ” ：即网页内容先后顺序分别为：背景边框，负值z-index，display:block，浮动，display:inline-block，z-index:auto，正值z-index，越往后在网页中的层级越靠前，也就是说如果一个z-index值为1或者更高的话，它就会遮挡掉他之前的所有元素。

利用这个法则以及opacity设置透明度，可以模拟一个样式：

<style>

*{

　　margin:;

　　padding:;

}

.uploadbox{

　　width:150px;

　　height:150px;

　　margin:100px;

　　position:relative;

}

.uploadbox input{

　　cursor:pointer;

　　width:%;

　　height:%;

　　position:absolute;

　　left:;

　　top:;

　　z-index:2;

　　opacity:0;

　　filter: alpha(opacity=0);

}

.uploadbox-bg{

　　position:absolute;

　　width:%;

　　height:%;

　　border:1px solid #cccccc;

　　background:#dfdfdf;

　　z-index:1;

}

.uploadbox-bg p,.uploadbox-bg span{

　　text-align:center;

}

.uploadbox-bg p{

　　font-size:80px;

　　color:#;

}

.uploadbox-bg span{

　　display:block;

　　font-size:14px;

　　color:#;

}

.uploadbox:hover .uploadbox-bg p,.uploadbox:hover .uploadbox-bg span{

　　color:blue;

}

</style>

<div class="uploadbox">

　　<input type="file" id="uploadbox" value="上传" />

　　<div class="uploadbox-bg">

　　　　<p>+</p>

　　　　<span>点击上传</span>

　　</div>

</div>

参考文章：http://www.cnblogs.com/ztfjs/p/select.html

注意：文章里面关于select设置样式的方法不兼容ie

巴特西

设置input的样式

最新文章

热门文章