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

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

Patricia Arquette
發布: 2024-11-01 16:51:02
原創
891 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板