首頁  >  文章  >  web前端  >  如何在 HTML 中自訂文件輸入按鈕並隱藏文字方塊?

如何在 HTML 中自訂文件輸入按鈕並隱藏文字方塊?

Patricia Arquette
Patricia Arquette原創
2024-11-01 16:51:02804瀏覽

How to Customize the File Input Button and Hide the Textbox in HTML?

如何設定 樣式隱藏文字方塊並只顯示按鈕

樣式可能具有挑戰性,尤其是在嘗試隱藏文字方塊並僅顯示按鈕時。

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn