瀏覽器默認的樣式是這樣的
這樣的
還有這樣的
這么丑的樣式是要逼瘋強迫症呀，下面我們來進行既簡單又實用的美化方式；
要修改他必須先了解他（以下測試僅限於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>