input(file)浏览按钮美化

参考资料：

http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html

 

我的：

<style>
.sh{
position: relative;
width: 350px;
float:left;
}

.sh input.text_style {
position: relative;
width: 320px;
padding-right: 30px;
z-index: 1001;
}

.sh span {
position: absolute;
z-index: 1002;
right: 10px;
top: 5px;
cursor: pointer;
background: url(../images/sh.png) no-repeat;
display: inline-block;
width: 20px;
height: 20px;
overflow: hidden;
}

.file_browser .file_field {
position: absolute;
right: 0;
top: 0;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
}

.file_ok {
position: relative;
border: none;
padding: 0 20px;
height: 32px;
margin-right: 10px;
margin-left:-1px;
z-index:1003;
text-align: center;
background: #ed3939;
line-height: 32px;
color: #fff;
display: inline-block;
cursor: pointer;
font-size: 16px;
-webkit-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}

.file_ok:hover {
opacity: 0.8;
filter: alpha(opacity=80);
float:left;

}

</style>

 <!--可以自定义宽度 设置file_browser和text_field的宽度相差30px即可-->

<div class="sh file_browser" style="width:600px"> 
<input style="width:570px" placeholder="点击右边查询按钮导入文件" type="text" name=""
class="text_field"/><span><input class="file_field" onchange="$('.text_field').val($(this).val())"
name="" id="" type="file"/></span>
</div><span class="file_ok">确定</span>

<!--确定按钮可以独立在外-->

<span class="file_ok">确定</span>

 

 

最后效果：