HTML自定義選取按鈕（input樣式的按鈕）
阿新 • • 發佈：2018-11-11
自定義檔案上傳按鈕
谷歌瀏覽器下，預設的按鈕是這個樣子的：
火狐瀏覽器下是醬紫的：
IE瀏覽器下是這個樣子的：
個人表示真的醜陋，無法接受！
修改
首先
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #file{ display: inline-block; } input.file{ display: block; position: absolute; cursor: pointer; left: 305px; //left 和top的功能從圖中可以看到，它將選擇檔案的的按鈕移動到跟瀏覽重疊的位置上 top: 7px; } a{ display: inline-block; text-decoration: none; color: red; } p{ //這裡的p類似文字框，等一下可以通過js將獲取到的檔名字填充到這裡來 display: inline-block; padding: 0; margin: 0; width: 205px; height: 18px; border: 1px cornflowerblue solid; vertical-align: text-bottom; font-size: 12px; } </style> </head> <body> <div class="upload"><span>上傳檔案:</span> <p id="file" class="textarea"></p> <a href="javascript:void(0);" class="input">瀏覽 <input type="file" name="file1" multiple="multiple" class="file" /> </a> </div> </body> </html>
最後，點睛之筆
input.file{
display: block;
position: absolute;
cursor: pointer;
left: 305px;
opacity: 0; //就是它，設定透明度的，將選擇檔案透明度變成0後，如圖：
top: 7px;
}
等等等等~
之所以要移動到跟瀏覽處重疊則是為了點選瀏覽時，可以彈出選擇檔案框
最後設定js部分，將選中的檔名字放到文字框
<p id="file" class="textarea"></p> <input type="file" name="file1" multiple="multiple" class="file" onchange="changefile(this.value)" />//加一個onchange事件 //記得載入input後面，不然根據js的載入順序，會沒有效果 <script> function changefile(x){ var change = document.getElementById("file"); change.innerText = x; } </script>
提交按鈕
效果如下
.btn{ margin-top: 40px; margin-left: 100px; background:url(img/按鈕.png) ; //給個按鈕上個背景 border: 0px; //將原本的邊框的設定為0 border-radius: 12px; //設定四個角的弧度 width: 135px; height: 49px; cursor: pointer;//設定滑鼠懸浮時，滑鼠的樣式 font-size: 0; //hahahhahahahahaha,這裡是我腦洞大發，把字型設定為0，但是這樣一來沒有字型撐開，它會很小很小， 所以在上面制定了寬度和高度 }