2015
03
24

上傳檔按鈕美化

關鍵字:input type="file"上傳檔按鈕

是不是常常覺得上傳檔案的按鈕<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
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所