28173 sujets

CSS et mise en forme, CSS3

Styler des balises options au sein de select (IE vs FF)

Bonjour,

J'ai longtemps regarder sur le forum à la recherhce d'une réponse à ma question . Quelquqe posts existent mais sont demeurés sans réponse Smiley bawling .

De même sur le net, des débuts de réponse existent (à base de behaviour, de javascript qui transforme le select en liste de ul li)... mais bon; riend econcluant.

Je souhaite mettre un style particulier (ex: width) sur mes balises "OPTION". Ca marche bien sous FF mais pas sous IE.
Connaissez-vous des workaround à ce problème?
TIA.
Harry

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
	.selectStyle{
		width:100px;
		
	}
	.optionStyle{
		width:400px;
	}	
</style>

<body>
	<form>
		<select size="1" class="selectStyle">
			<option value="1" style="optionStyle">First option </option>
			<option value="2" style="optionStyle">Second option Second option Second option </option>
			<option value="3" style="optionStyle">Third option Third option Third option Third option </option>
			<option value="4" style="optionStyle">Fourth option </option>
			<option value="5" style="optionStyle">Fiveth option </option>
			<option value="6" style="optionStyle">Sixth option </option>
			<option value="7" style="optionStyle">Seventh option </option>
		</select>
	</form>
	
</body>
</html>


Rendu FF
upload/8515-FFsampleSel.gif
Rendu IE
upload/8515-IEsampleSel.gif 

	.selectStyle {
		width:100px;
	}

	.optionStyle{
		width:400px;
	}


Déjà peut-etre mettre tout ca dans une feuille de style a part que tu appelerai dans ton fichier HTML, et puis enlever l'attribut size="1" de la balise select qui n'est pas valide avec le DOCTYPE que tu utilise ...
Modifié par chpego (26 Oct 2006 - 10:44)
Merci chpego.
a écrit :
Déjà peut-etre mettre tout ca dans une feuille de style a part que tu appelerai dans ton fichier HTML
Le code joint est juste un exemple illustrant le problème. Dans ma véritable application, les styles sont externalisés.
a écrit :
et puis enlever l'attribut size="1" de la balise select qui n'est pas valide avec le DOCTYPE que tu utilise ...
L'attribut size="1" est un oubli qui n'a pas d'impact sur ma demande.

Ma demande:Je souhaite styler les balises "OPTION".

Une idée?

TIA.

Harry.
Salut

Manifestement, IE (6 en tous cas) ne veut pas obéir Smiley confus

J'ai bien peur que la solution soit effectivement un bidouillage à base de javascript, comme tu l'as évoqué dans ton message de départ ... et si on peut parler de solution.

Qu'est-ce que ça donne avec IE 7, par curiosité ?
Malheureusement, j'ai pas pu tester avec IE 7.
Si kelkin a la possibilité de tester avec IE 7 TIA.

J'ai tenté d'accrocher un listener "onmouseover" à la balise... ca ne marche pas plus. L'idée était de faire un "tooltip" au passage de la souris sur la balise "OPTION".
Mais rien n'y fait. Re Smiley bawling = Smiley bawling Smiley bawling
chpego pourrais-tu creuser l'idée de ton 1er post STP?

Je bénis par avance le bienveillant AlsaceCreationsPoster qui me sortira de cette m...

Harry.
Euh Smiley rolleyes j'avai pas d'idée précise...

Si j'ai bien compris ton problème, avant de cliquer sur le menu, tu veux une taille définie, puis lorsque le menu se déroule tu veux que la taille soit adapté au plus grand des textes (cf: ton rendu sous Firefox), et tu veux que cela soit possible sur Internet Explorer... Smiley langue
Que les modérateurs m'exusent par avance mais... je dois faire une relance sur ce sujet.

Quelqu'un aurait un petit avis????
Y'a pas vraiment de solution, chaque navigateur fait ce qu'il veut... Et surtout pour les <select> où IE est particulièrement relou Smiley decu
Sujet clos
Aller à