不知道大家有沒有這種困擾， 在製作網頁時，遇到要上傳檔案的部分， 總會覺得那個上傳檔案的表單（<input type="file">）實在不是挺好看。 雖然 IE 中的這個部分可以使用 CSS 改變， 但是 MSIE 以外的瀏覽器就幾乎無法支援。 如果今天是對於要製作，支援各家瀏覽器的網頁， 那麼單用 CSS 就無法改善所有的情況， 畢竟現在使用 FireFox/Mozilla 也越來越多了。 小弟也曾經試過利用一般的 button 的 onClick 來觸發隱藏起來（display="none"）的 <input type="file">。 但是很遺憾，MSIE 以外的瀏覽器基於安全考量， 也幾乎無法以 javascript 使用物件的 click()。 不過今天小弟誤打誤撞找到一個他人提供的解決的技術， 於是上來和大家分享一下。 （其實比較擔心大家都已經知道了然後看小弟在這裡耍笨… orz） --------------------- 以下正文線 -------------------- 如果說這個不屌的話，那真的沒什麼屌了… http://www.quirksmode.org/dom/inputfile.html For MSIE 以外的檔案上傳修飾。 自己測試成功的修改過的內容： test.php --------------------- <style type="text/css" media="all"> div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } input.file { position: relative; text-align: left; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } </style> <div class="fileinputs"> <input size="16" type="file" class="file" onChange="document.getElementById('filepath').value = this.value;"> <div class="fakefile"> <input size="16" id="filepath"> <input size="4" type="button" value="上傳"> </div> </div> --------------------- 以上正文線 -------------------- 另：網頁中的 input.file CSS 是使用 text-align: right;， 但小弟以 FireFox 測試過後，原本被隱藏起來的上傳按鈕會漂流到 視窗的最右邊，所以小弟改成 text-align: left; --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 163.13.128.240