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

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

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

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

css html using this display input

陳述：

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

上一篇：如何使用 JavaScript/jQuery 實現無縫無限循環圖像滑桿？下一篇：如何使用 JavaScript/jQuery 實現無縫無限循環圖像滑桿？

看更多