Comment styliser les listes de sélection avec remplissage dans Safari et IE malgré les spécifications W3 ?

Style des listes de sélection avec remplissage dans Safari et IE

Malgré la spécification W3 n'interdisant pas l'utilisation de remplissage dans les zones de sélection, les navigateurs Webkit tels car Safari et Chrome ne prennent pas en charge cette fonctionnalité. Pour obtenir l'effet souhaité, envisagez de remplacer la propriété padding-left par text-indent, en veillant à ajuster la largeur de la zone de sélection en conséquence.

Exemple :

Dans ce qui suit extrait de code, la propriété padding-left est supprimée et remplacée par text-indent :

<code class="html"><select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;"></code>

En ajoutant la même quantité d'indentation de texte que l'aurait occupé le remplissage, la zone de sélection a désormais un élément aligné à gauche champ de texte. Cette solution de contournement simule efficacement le comportement du remplissage dans Safari et IE, offrant une expérience de style cohérente sur différents navigateurs.

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!