首頁 > web前端 > css教學 > 如何在沒有 JavaScript 的情況下設定檔案上傳按鈕的樣式?

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

Mary-Kate Olsen
發布: 2024-12-10 07:28:09
原創
735 人瀏覽過

How Can I Style File Upload Buttons Without 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板