如何在沒有 JavaScript 的情況下設定檔案上傳按鈕的樣式？

無需JavaScript 設計檔案上傳按鈕

許多自訂檔案上傳按鈕的嘗試通常採用JavaScript 或Quirksmode 的方法，這在尺寸和自動調整方面存在局限性。本文探討了一種使用 的不太麻煩的解決方案。標籤。

利用 標籤

; element 使我們能夠在沒有 JavaScript 的情況下設計檔案上傳按鈕的樣式。它將點擊事件轉發到其子元素，允許我們將其用作隱藏檔案上傳按鈕的包裝。

程式碼範例

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

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

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

在此範例中，我們隱藏檔案上傳按鈕使用position:absolute和top:-1000px並設定樣式根據需要標記。標籤接收點擊事件並將其轉發到隱藏的輸入按鈕。

這種方法的優點

• 與 webkit 的內建樣式相比，樣式具有更大的彈性。
• 無需 JavaScript，效率更高。
• 它克服了 Quirksmode 的限制方法，使檔案按鈕能夠填充整個父容器。

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