input file自定按钮清理(演试)

之前写过这样的文章内容可是用了js脚本制作,优势是能够显示信息文档相对路径。

假如能够不必看到相对路径,只显示信息自定按钮,另有其方式,下面只是用用了css的技能来完成。

重要是给file文档域给了font-size,设定1个较为大的值,使其表单大写产生更改(各访问器外型不一样,但大写都更改了)以下图:

input{font-size:100px;}

再用position精准定位,和全透明度做到自身要想的实际效果。实际编码以下:

拷贝编码
编码以下:

.fileInputContainer{
height:256px;
background:url(//img.jbzj.com/file_images/article/201212/20641.png);
position:relative;
width: 256px;
}
.fileInput{
height:256px;
overflow: hidden;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}


拷贝编码
编码以下:

<div class="fileInputContainer">
<input class="fileInput" type="file" name="" id="" />
</div>

DEMO: