这个还真没什么有效的办法，这个是控件来的，可以用一些美化js插件来美化，所以要借助js来控制
纯css是解决不了的
input type=file的样式因为html自带的上传按钮比较丑，所以可以用css对其优化
思路：
input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。
DOM结构：
<a href="javascript:" class="a-upload"><input type="file" name="" id="">点击这里上传文件
</a>
<a href="javascript:" class="file">选择文件
<input type="file" name="" id="">
</a>
CSS样式1：
/*a upload */
.a-upload {
padding: 4px 10px
height: 20px
line-height: 20px
position: relative
cursor: pointer
color: #888
background: #fafafa
border: 1px solid #ddd
border-radius: 4px
overflow: hidden
display: inline-block
*display: inline
*zoom: 1
}
.a-upload input {
position: absolute
font-size: 100px
right: 0
top: 0
opacity: 0
filter: alpha(opacity=0)
cursor: pointer
}
.a-upload:hover {
color: #444
background: #eee
border-color: #ccc
text-decoration: none
}
样式2：
.file {
position: relative
display: inline-block
background: #D0EEFF
border: 1px solid #99D3F5
border-radius: 4px
padding: 4px 12px
overflow: hidden
color: #1E88C7
text-decoration: none
text-indent: 0
line-height: 20px
}
.file input {
position: absolute
font-size: 100px
right: 0
top: 0
opacity: 0
}
.file:hover {
background: #AADFFD
border-color: #78C3F3
color: #004974
text-decoration: none
}
修改之后
貌似是不能修改
file
里面自带的内容的
但是你可以做一个你想要的样式，然后将
file
的
opacity
设置成
0
，然后用
position:
absolute宽度；高度，覆盖在你想要的样式上，这样点击那个位置就相当于点击
file
