如何設定文件輸入欄位的樣式（如按鈕）：CSS 指南

使用「檔案」類型設定輸入欄位的樣式

在 Web 開發領域，自訂輸入欄位的外觀通常是必要的。雖然傳統的輸入類型可能就足夠了，但設計文件選擇器等特定元素可能會帶來獨特的挑戰。

隱形文字方塊難題

其中一個挑戰是隱藏與檔案輸入欄位。增強使用者體驗通常需要純按鈕介面。要實現此目的，請考慮以下以CSS 為中心的方法：

CSS 實現：

以下程式碼片段示範如何在保持按鈕功能的同時偽裝文本框：

<code class="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] {
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            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>
</code>

將「fakefile」元素放置在原始文字方塊上並將其輸入按鈕設為全寬，建立按鈕式檔案選擇器的外觀。同時，實際的文字方塊在視覺上被隱藏，不透明度為零。

以上是如何設定文件輸入欄位的樣式（如按鈕）：CSS 指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！