如何在沒有 JavaScript 的情況下設定自訂檔案輸入按鈕的樣式？

自訂檔案輸入樣式：基於標籤的方法

許多開發人員都在努力自訂檔案上傳按鈕的外觀。雖然 JavaScript 可以提供解決方案，但它也可能帶來額外的挑戰。幸運的是，有一種更簡單、更跨平台的方法，使用 HTML 。

使用 的好處

使用提供了幾個優點：

• 不需要JavaScript： 標籤自動處理點擊事件，將它們定向到子輸入元素。
• 樣式自由：與某些瀏覽器特定的樣式技術不同，可讓您自訂輸入外觀的各個方面。
• 語意程式碼： ;標籤在語意上將標籤文字與輸入欄位相關聯，從而提供可訪問性優勢。

實現

要實現此方法，請按照以下步驟操作：

1. 將隱藏檔案上傳輸入包裝在
2. 將隱藏檔案上傳輸入包裝在 中
3. 設定 的樣式容器類似按鈕。

將輸入絕對放置在可見區域之外，以防止使用者與預設按鈕互動。

<label class="myLabel">
    <input type="file" required>
    <span>My Label</span>
</label>

範例程式碼

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

在此範例中，輸入位於螢幕外，上方：-1000px。套用於 的樣式提供類似按鈕的外觀，包括邊框、半徑和懸停效果。 :invalid 和 :valid 偽類別允許基於輸入驗證狀態的動態樣式。

結論

這種基於 的方法提供了一個交叉- 瀏覽器和可訪問的方法，用於自定義文件上傳按鈕，而無需訴諸JavaScript 或hack。它簡化了樣式，改善了使用者體驗，並確保跨多個瀏覽器的一致顯示。

以上是如何在沒有 JavaScript 的情況下設定自訂檔案輸入按鈕的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！