28172 sujets

CSS et mise en forme, CSS3

[IE] Style (background) dans select/option

Bonjour!

J'ai l'HTML suivant:
<form id="lngSelect">
	<select name="file" size="1" >
		<option class="en" value="en" >english</option>
		<option class="fr" value="fr" selected="selected">français</option>
		<option class="es" value="es" >español</option>
		<option class="ne" value="ne" >nederlands</option>
		<option class="ar" value="ar" >&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
	</select>
</form>


Puis mon CSS
form#lngSelect select {
	width: 110px;
}
form#lngSelect select option {
	padding-left: 20px;
}
form#lngSelect select option.en {
	background:	url(lng-en.gif) no-repeat center left;
}
form#lngSelect select option.fr {
	background:	url(lng-fr.gif) no-repeat center left;
}
form#lngSelect select option.es {
	background:	url(lng-es.gif) no-repeat center left;
}
form#lngSelect select option.ne {
	background:	url(lng-ne.gif) no-repeat center left;
}
form#lngSelect select option.ar {
	background:	url(lng-ar.gif) no-repeat center left;
}


Ca passe très bien avec FF, j'ai mes petits drapeux à côtés des noms des langues mais pas du tout sous IE, comme si aucune style ne passait... Commen faire? Hack?

Merci! ;o)
Heu... Merci!

J'aimerais simplement pouvoir mettre des icônes à côté des éléments de ma liste et que ce soit visible sur IE comme c'est déjà le cas sur FF, c'est tout! ;o)
Modifié par GiB (25 Jul 2008 - 13:26)
Salut,
Aurais-tu trouvé une solution ? je rencontre la même problématique
Merci
Malheureusement, pas de solution standard car IE ne supporte aps la propriété background sur l'élément option... :o(
Bonjour,

Pas d'image de fond, couleur de fond, couleur de texte, padding ou autres styles CSS pour les SELECT/OPTION. Il n'y a pas une propriété qui passe à la fois dans Internet Explorer, Firefox, Safari et Opera. Il faut utiliser le style brut des SELECT, et basta. Même chose, dans une large mesure, pour les INPUT de type radio et checkbox. Les autres éléments de formulaire sont généralement plus aisés à styler, même si on peut rencontrer des difficultés.

Le seul moyen d'avoir des SELECT, radio et checkbox personnalisés, c'est de les simuler en HTML (avec des éléments neutres tels que des SPAN)+CSS+JavaScript. Ça donne généralement du bricolage casse-gueule et peu ou pas accessible. Il me semble qu'il y a un script JS qui fait ce genre de choses plutôt correctement malgré tout (par contre je doute que ça soit accessible), mais je ne l'ai plus en tête.
Sujet clos
Aller à