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

檔案上傳按鈕的跨瀏覽器自訂樣式[重複]

簡介：

檔案上傳按鈕的樣式可以是由於瀏覽器定義的尺寸而具有挑戰性。傳統方法通常涉及 JavaScript 或 Quirksmode 的技術，這些技術可能有其限制。在這裡，我們探索一種更用戶友好和有效的解決方案，而不需要 JavaScript。

答案：

一個簡單而有效的方法是使用 。圍繞隱藏檔案上傳新增標籤按鈕。

HTML:

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

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

優點>

沒有JavaScript必需

• 允許在樣式方面有更多的自由和控制
• 支援跨瀏覽器相容性，無需瀏覽器定義的輸入尺寸
• 此方法讓您能夠設定檔案上傳按鈕的樣式輕鬆使用HTML 和CSS，提供無縫的使用者介面和更好的整體網頁設計體驗。

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