Comment puis-je styliser les éléments HTML avec CSS ?

Style Éléments avec CSS

Contrairement à la personnalisation de la liste déroulante à l'aide de JavaScript, il n'est pas possible de styliser directement éléments dans un élément utilisant CSS uniquement en raison d'incompatibilités de navigateur.

Compatibilité entre navigateurs

Pour les navigateurs tels que IE9, Firefox et Chrome, les propriétés CSS suivantes peuvent fournir un style partiel options :

• -webkit-apparence : aucune ; (Navigateurs WebKit)
• -moz-apparence : aucun ; (Firefox)
• apparence : aucune ; (navigateurs modernes)

Ces propriétés peuvent supprimer le style par défaut de la liste déroulante, mais la personnalisation supplémentaire est limitée.

Solution alternative

Pour obtenir une apparence similaire, vous pouvez utiliser une approche de contournement en convertissant le paramètre

élément dans une liste déroulante personnalisée en utilisant HTML et CSS :

1. Créez un
   élément pour représenter la liste déroulante.
2. Utilisez HTML pour créer un
   élément avec
   • balises pour les options déroulantes.
   • Masquer le
     élément utilisant initialement display: none; Propriété CSS.
     • En survolant la propriété
       élément, définissez display: block; pour afficher l'élément

       et ajoutez des styles pour les bordures, le remplissage et la couleur d'arrière-plan.
       • Stylisez l'élément
       • éléments dans le
         avec survol et états actifs pour des effets interactifs.

Exemple

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

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!