[Web] Custom File Button

我們常用的 html upload file 的語法
<input type="file" value="Upload" />
會產生一個普通的按鈕
如果要保留 file chooser 功能又要美化按鈕外觀的話
可以搭配 CSS


style.css

.file_button_container,
.file_button_container input {
  height: 48px;
  width: 48px;
}
.file_button_container {
  background: transparent url(images/choose_file.png) left top no-repeat;
}
.file_button_container input {
  opacity: 0;
  -moz-opacity: 0.0;
  filter: alpha(opacity=00);
}


在 html 裡, 用一個 class 為 file_button_container 的 div
包住 file button


<div class="file_button_container" id="userfile_div">
<input id="userfile" name="userfile" type="file" />
</div>



就可以了