為什麼我的下拉式選單背景圖片在 Chrome 中不顯示？

Chrome 下拉背景影像問題

嘗試使用CSS 將背景影像套用到選取/下拉元素時，它可能無法正確顯示在Chrome中。這是一個常見問題，解決起來可能令人沮喪。

以下CSS 程式碼適用於Firefox 和Internet Explorer，但無法在Chrome 中套用背景圖片：

<code class="css">#main .drop-down-loc {
  width: 506px;
  height: 30px;
  border: none;
  background-color: Transparent;
  background: url(images/text-field.gif) no-repeat 0 0;
  padding: 4px;
  line-height: 21px;
}</code>

至要在Chrome 中解決此問題，需要使用-webkit-appearance 屬性刪除下拉清單的預設外觀：

<code class="css">select {
  -webkit-appearance: none;
}</code>

此CSS 規則指示Chrome 忽略其預設下拉清單外觀並套用您的自訂樣式

如果需要，您也可以包含包含下拉箭頭的圖像作為背景的一部分。這可以提供更無縫的外觀並增強用戶體驗。

以上是為什麼我的下拉式選單背景圖片在 Chrome 中不顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！