浏览器默认的样式是这样的
这样的
还有这样的
这么丑的样式是要逼疯强迫症呀，下面我们来进行既简单又实用的美化方式；
要修改他必须先了解他（以下测试仅限于IE、火狐、谷歌，其余浏览器请大家自行测试，手动微笑），毋庸置疑各个浏览器都可以支持宽度和高度，但在IE、火狐中设置的宽度对浏览按钮不起作用，这是就需要其他办法来弥补，就是font-size随着设置字体的大小input也会随之变大，以此来解决外观炫酷但是本质还是默认一不留神点击不到尴尬情况，其次在input外面包裹一个标签，只要给这个标签设置鼠标手势的属性即可,让其看起来是可点击状态，css样式代码如下
<style> .fileBox{ display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden; cursor: pointer; text-align: center; line-height: 40px; text-decoration: none; color: white; font-size: 14px; } .fileBox:hover{background:green;} .fileBox input{ position:absolute; left:0; top:0; opacity:0; font-size: 100px; filter:alpha(opacity=0); } </style> <body> <a href="#" class="fileBox"> 上传附件 <input type="file" name="upload"/> </a> </body>