首頁 >web前端 >css教學 >如何自訂不同瀏覽器中文件輸入欄位的遊標?

如何自訂不同瀏覽器中文件輸入欄位的遊標?

Patricia Arquette
Patricia Arquette原創
2024-11-22 10:06:11527瀏覽

How Can I Customize the Cursor for File Input Fields in Different Browsers?

自訂檔案輸入類型的遊標

修改檔案輸入的遊標類型可能很麻煩。標準CSS 方法無法運作,如範例程式碼中所反白的那樣:

input[type="file"] {
  cursor: pointer;
}

幸運的是,Chrome 瀏覽器有一個利用::webkit-file-upload-button 偽類的部分解決方案:

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

此技術允許將遊標設定為自訂類型,同時保持檔案輸入的原始外觀。請注意,此解決方案僅適用於 Chrome 和基於其 Blink 引擎的瀏覽器。 Firefox 和 Safari 目前表現出不同的行為。

以上是如何自訂不同瀏覽器中文件輸入欄位的遊標?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn