如何在 HTML 中自訂文件輸入按鈕並隱藏文字方塊？-css教學-PHP中文網

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

Patricia Arquette

發布： 2024-11-01 16:51:02

原創

820 人瀏覽過

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