上傳檔按鈕美化

是不是常常覺得上傳檔案的按鈕＜input type="file"＞很單調，而且跟自己設計的網站不是很搭呢？最近發現了一個可以好好美化它的方法！如下圖：


上面是還沒美化、在chrome原本的樣式，下面的則是美化過後的樣式！


HTML設定：
＜div class="file-box"＞
＜form method="post" enctype="multipart/form-data"＞
＜!--檔案名稱--＞
＜input name="textfield" id="textfield" class="filename"＞

＜!--上傳按鈕--＞
＜input type="button" class="button" value="選取檔案 "＞

＜!--原按鈕隱藏--＞
＜input type="file" name="file" class="file" onchange="document.getElementById('textfield').value=this.value"＞
＜/form＞
＜/div＞

CSS設定：
/*最外層div*/
div.file-box {
position:relative;
width:298px
}

/*檔案名稱*/
input.filename {
width:288px;
height:23px;
padding-left:8px;

background-color:#ffffff;
border:#cccccc 1px solid;
border-radius:5px;

color:#666666;

}

/*選取檔案按鈕*/
input.button {
width:82px;
height:27px;
padding-left:13px;

background-color:#096;
border:0;
border-radius:0 5px 5px 0;

position:absolute;
top:0;
right:0;

color:#ffffff;
font-size:14px;
cursor:pointer;
}

/*隱藏原按鈕*/
input.file {
width:297px;
height:24px;

position:absolute;
top:0;
right:0;

filter:alpha(opacity:0);
opacity:0;

font-size:20px;
cursor:pointer;
}

首先我們要設一個div，把一整個from包起來，from裡面只要有三樣東西：
1、顯示檔案名稱的文字框
2、上傳按鈕
3、還有原本的input type="file"這一定要有喔！這樣才能有上傳的功能！

把文字框和上傳按鈕想要的樣式寫好，然後定位在外層的div，最重要的就是input type="file"這個！在css寫上 opacity:0; 讓它變成透明的！記得把寬高設為你想要的大小，這樣才能不管點到哪邊都能跳出上傳檔案的框，然後一樣定位在div上，覆蓋一整個div！

input type="file"標籤上有寫了一段語法：
onchange="document.getElementById('textfield').value=this.value
這是要讓原本的檔案名稱，可以出現在textfield這個id上！也就是我們美化的文字框，幫他命名id=” textfield”，這樣原本出現在input type="file"的檔案名稱，就會跑到我們美化過的文字框上啦！

參考網址：http://oahehc1.blogspot.tw/2014/05/file-button-style.html