如何設定 樣式隱藏文字方塊並只顯示按鈕
樣式可能具有挑戰性,尤其是在嘗試隱藏文字方塊並僅顯示按鈕時。
CSS 解決方案
要使用CSS 實現所需的效果,請考慮以下程式碼:
<code class="html"><html> <style type="text/css"> div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } div.fakefile input[type=button] { /* enough width to completely overlap the real hidden file control */ cursor: pointer; width: 148px; } div.fileinputs input.file { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } </style> <div class="fileinputs"> <input type="file" class="file" /> <div class="fakefile"> <input type="button" value="Select file" /> </div> </div> </html></code>
此CSS 程式碼建立一個與真實檔案輸入重疊的fakefile 按鈕,並使用不透明度:0 隱藏文字方塊;。
以上是如何在 HTML 中自訂文件輸入按鈕並隱藏文字方塊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!