Pourquoi mon image d'arrière-plan déroulante ne s'affiche-t-elle pas dans Chrome ?

Problème d'image d'arrière-plan de la liste déroulante Chrome

Lorsque vous essayez d'appliquer une image d'arrière-plan à un élément de sélection/liste déroulante à l'aide de CSS, elle peut ne pas s'afficher correctement dans Chrome. Il s'agit d'un problème courant qui peut être frustrant à résoudre.

Le code CSS suivant, qui fonctionne dans Firefox et Internet Explorer, ne parvient pas à appliquer l'image d'arrière-plan dans 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>

Pour pour résoudre ce problème dans Chrome, il est nécessaire de supprimer l'apparence par défaut de la liste déroulante à l'aide de la propriété -webkit-apparance :

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

Cette règle CSS demande à Chrome d'ignorer son apparence déroulante par défaut et d'appliquer vos styles personnalisés à la place.

Si vous le souhaitez, vous pouvez également inclure une image contenant la flèche déroulante dans le cadre de l'arrière-plan. Cela peut fournir une apparence plus transparente et améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!