Maison > interface Web > tutoriel CSS > Comment appliquer un remplissage aux listes de sélection dans Safari et Internet Explorer ?

Comment appliquer un remplissage aux listes de sélection dans Safari et Internet Explorer ?

Mary-Kate Olsen
Libérer: 2024-10-24 08:44:01
original
257 Les gens l'ont consulté

How to Apply Padding to Select Lists in Safari and Internet Explorer?

Remplissage non appliqué aux listes de sélection Safari et IE

L'amélioration du style des listes de sélection dans Safari et Internet Explorer peut s'avérer difficile en raison d'un manque de support pour le rembourrage. Alors que la spécification du World Wide Web Consortium (W3C) autorise le remplissage des zones de sélection, les navigateurs Webkit comme Safari et Chrome ignorent cette fonctionnalité.

Pour résoudre ce problème, une approche alternative consiste à utiliser l'indentation du texte à la place de rembourrage-gauche. En ajoutant la même quantité à la largeur de la zone de sélection, vous pouvez effectivement obtenir l'espacement souhaité.

Considérez le code suivant :

<select id="sexID" name="user[sex]"
        style="border: 1px solid #C1272D;
               width: 258px; // 243 + 15px
               text-indent: 15px;
               height: 25px;
               color: #808080;">
Copier après la connexion

Cet exemple montre comment obtenir les 15 px souhaités. remplissage en appliquant text-indent: 15px et en augmentant la largeur de la zone de sélection en conséquence.

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal