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

**Arkoze** · 25/08/2011, 10h59

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, 11h08

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, 11h16

En créant sa propre liste déroulante sinon

**pc75** · 25/08/2011, 12h28

Bonjour,

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

**Auteur** · 25/08/2011, 13h29

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

).

Invité · 25/08/2011, 20h47

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> ...)

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

HTML

Vue hybride

Discussions similaires

Partager

Partager