Comment puis-je styliser de manière fiable les éléments d'option sélectionnés dans différents navigateurs ?

Styler les éléments d'option de sélection dans différents navigateurs

Le style des éléments d'option dans un menu de sélection peut poser des problèmes, en particulier dans les navigateurs plus anciens comme IE9 et Chrome. . Bien que certains navigateurs prennent en charge le style de ces éléments à l'aide de CSS, d'autres peuvent présenter des limitations.

Problèmes de style des éléments d'option dans IE9 et Chrome

Le code fourni démontre une tentative de style d'un élément d'option à l'aide d'un sélecteur de classe :

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

Cependant, dans IE9 et Chrome, ce style ne s'applique pas à la couleur d'arrière-plan de l'option. En effet, les navigateurs WebKit ne prennent pas entièrement en charge le style des éléments d'option, à l'exception de la couleur et de la couleur d'arrière-plan.

Solution multi-navigateurs

Étant donné que tous les navigateurs ne fournissent une prise en charge cohérente des options de sélection de style, une approche plus fiable consiste à utiliser une structure HTML alternative qui permet une personnalisation CSS complète. Cela peut être fait en remplaçant le menu de sélection par une combinaison d'un ul (liste non ordonnée) et d'un li (éléments de la liste) :

HTML :

<ul>
    <li>Red</li>
    <li>White</li>
    <li>Blue</li>
    <li>Green</li>
</ul>

CSS :

ul {
    display: flex;
    flex-direction: column;
    padding: 0;
}

li {
    list-style-type: none;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li:hover {
    background-color: #cc0000;
}

Cette méthode permet un contrôle CSS complet sur l'apparence des options, y compris la couleur d'arrière-plan et d'autres options de style.

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!