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.

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.

En créant sa propre liste déroulante sinon

Bonjour,

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

bonjour,

il y a fort longtemps (:aie:) j'avais élaboré ce petit script :

Code:

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

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