Comment définir une taille à la balise select option ?

Arkoze · 25/08/2011, 09h59

Bonjour,

Voilà, j'ai une liste déroulante et j'aimerai savoir s'il est possible de définir une taille pour les éléments de la liste plus grande que la taille du select.

C'est pas très clair je sais mais en gros, disons que j'ai une liste déroulante qui fait 50px de largeur et j'aimerai lorsqu'on déroule cette liste, que la zone déroulé s'adapte en fonction de la taille du texte donc qui sera minimum de 50px.

j'ai essayé de donné un width à la balise option mais sans succès

Merci d'avance.

Bovino · 25/08/2011, 10h08

Citation:

Envoyé par Arkoze

j'aimerai savoir s'il est possible de définir une taille pour les éléments de la liste plus grande que la taille du select.

Non.

Kaamo · 25/08/2011, 10h16

En créant sa propre liste déroulante sinon

pc75 · 25/08/2011, 11h28

Bonjour,

Une façon de faire ici => http://www.developpez.net/forums/d10...rgeur-options/

Auteur · 25/08/2011, 12h29

bonjour,

il y a fort longtemps (

) j'avais élaboré ce petit script :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
function afficheListe()
{
	if (document.getElementById('idListe').style.display=='block')
		document.getElementById('idListe').style.display='none';
	else
		document.getElementById('idListe').style.display='block';
}
 
function outOption(opt)
{
	opt.style.backgroundColor="";
}
 
function overOption(opt)
{
	opt.style.backgroundColor="#AAAAFF";
}
 
function clicOption(opt)
{
	outOption(opt);
	document.getElementById("idSelect").innerHTML = opt.innerHTML;
	afficheListe();
}
</script> 
 
 
<style type="text/css">
<!--
#idListe{
	border: solid #AAAAAA 1px; 
	width:300px; 
	height:100px; 
	overflow:auto; 
	float:left; 
	position:absolute; 
	display:none; 
	background-color:white;
}
 
#idSelect{
	border: solid #AAAAAA 1px;
	width:150px;
}
 
-->
</style> 
 
 
</head>
 
<body>
 
<div id="idSelect" onclick="afficheListe()">Faites votre choix</div>
 
<div id="idListe">
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 1 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 2 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 3 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 4 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 5 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 6 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 7 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 8 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 9 </div>
<div onmouseover="overOption(this)" onmouseout="outOption(this)" onclick="clicOption(this)"> Option 10 </div>
</div>
 
<hr style="clear:both;"/>
<br /><br /><br /><br />
 
<div>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</div>	 
 
 
</body>
</html>

Le listes sont créées avec des div.

J'avais proposé plusieurs types de listes :
http://www.developpez.net/forums/d26...lantes-images/

Attention : les scripts ne sont pas tout jeune (2007). Ils fonctionnent sous IE 9 (et précédents) et FF 3, 4, 5 et 6.
Je n'ai jamais eu l'occasion de les tester sur d'autres navigateurs (ça sera l'occasion de vérifier s'ils sont encore opérationnels

).

jreaux62 · 25/08/2011, 19h47

Citation:

Envoyé par Arkoze

... que la zone déroulé s'adapte en fonction de la taille du texte...

Apparemment, c'est le comportement par défaut pour firefox et safari.
(ps : adaptation automatique : on ne peut pas "définir" la largeur)

Pas pour I.E., comme d'hab'...

La solution d'Auteur a en plus l'avantage de pouvoir "styler" complètement la liste en CSS.
(ce qui n'est pas forcément possible ou "facile" avec <select><option> ...)

25/08/2011, 09h59	#1
Arkoze Candidat au titre de Membre du Club Inscription : février 2007 Messages : 81 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : février 2007 Messages : 81 Points : 11 Points : 11	Comment définir une taille à la balise select option ? Bonjour, Voilà, j'ai une liste déroulante et j'aimerai savoir s'il est possible de définir une taille pour les éléments de la liste plus grande que la taille du select. C'est pas très clair je sais mais en gros, disons que j'ai une liste déroulante qui fait 50px de largeur et j'aimerai lorsqu'on déroule cette liste, que la zone déroulé s'adapte en fonction de la taille du texte donc qui sera minimum de 50px. j'ai essayé de donné un width à la balise option mais sans succès Merci d'avance.
	00

25/08/2011, 11h28	#4
pc75 Expert Confirmé Inscription : septembre 2004 Messages : 2 805 Détails du profil Informations personnelles : Âge : 56 Localisation : France, Paris (Île de France) Informations forums : Inscription : septembre 2004 Messages : 2 805 Points : 3 003 Points : 3 003	Bonjour, Une façon de faire ici => http://www.developpez.net/forums/d10...rgeur-options/ __________________ Par principe, je ne réponds pas aux messages URGENT. Il n'y a pas de choses urgentes, il n'y a que des choses en retard. (un inconnu)
	00

25/08/2011, 10h16	#3
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	En créant sa propre liste déroulante sinon
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email