css input[type=file] 樣式美化，input上傳按鈕美化

咱們在作input文本上傳的時候，html自帶的上傳按鈕比較醜，如何對其進行美化呢？同理：input checkbox美化，input radio美化是一個道理的，後面文章會總結。

思路：

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; }

修改後以下：

樣式二：

備註：對於HTML5之input:file，還能夠控制上傳的類型的，可是這個是html5的，低版本瀏覽器不支持，詳情請看：HTML5的 input:file上傳類型控制 http://www.haorooms.com/post/input_file_leixing

美化後顯示文件名

上面美化，把默認顯示的文件名也給隱藏掉了，那麼如何顯示文件名稱呢？不要緊，咱們能夠用jquery來獲取文件的文件名。

咱們能夠寫個change事件

$(".a-upload").on("change","input[type='file']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip").html("").hide(); var arr=filePath.split('\\'); var fileName=arr[arr.length-1]; $(".showFileName").html(fileName); }else{ $(".showFileName").html(""); $(".fileerrorTip").html("您未上傳文件，或者您上傳文件類型有誤！").show(); return false } })

其餘input美化文章

關於 input checkbox和radio樣式美化，我也寫了一篇文章，請看 http://www.haorooms.com/post/css_mh_ck_radio

還有input search 右側有個關閉按鈕的美化，能夠看http://www.haorooms.com/post/qd_ghfx 第五條