如何在沒有 JavaScript 的情況下跨瀏覽器自訂檔案上傳按鈕樣式？

跨瀏覽器自訂檔案上傳按鈕樣式

在不借助JavaScript 的情況下自訂檔案上傳按鈕的外觀可能具有挑戰性。然而，存在一種簡單有效的技術，可以利用標籤標籤來實現所需的結果。

使用 標籤

標籤提供了一種將文字標籤與表單輸入相關聯的方法。透過將隱藏檔案上傳輸入包含在標籤內，您仍然可以捕獲標籤內的點擊事件並將其重定向到隱藏輸入。

CSS 樣式

一旦檔案上傳輸入是隱藏的，您可以使用 CSS 自由設定周圍標籤的樣式。例如，以下程式碼示範了自訂檔案上傳按鈕：

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;
}

HTML 實作

要在HTML 中實作此技術：

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

透過使用此方法，您可以完全控製檔案上傳按鈕的樣式，無需任何JavaScript，也不受瀏覽器定義輸入的限制尺寸。

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