barre horizontale+select multiple

bonjour,

Non tu ne peux pas ou alors ne précise pas la largeur de ta liste :(
Par contre sous Firefox, tu peux spécifier une largeur pour les options (qui peut être plus grande que celle du select). Par exemple :

Code:

1
2
3
4
5
6
7
 
select{
 width : 200px;
}
option{
 width : 300px;
}

Sinon tu peux créer ta liste déroulante. Voici un exemple :

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
95
96
97
98
 
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.conteneurListe{
  border: inset 2px #444444;
  overflow: scroll; 
  width: 250px; 
  height: 200px;  
}
 
.item{
  background-color:;
  color: #000000;
  margin: 2px;
  width: 350px;
}
 
.itemSelectione{
  background-color: #2222AA;
  color: #FFFFFF;  
  margin: 2px;
  width: 350px;
}
 
#liste1{
  list-style: none;
  padding: 0px; 
  margin: 0px;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
function selectionItem(item)
{
  if (item.className=="item")
    item.className = "itemSelectione";  
  else
    item.className = "item";  
}
 
function afficheSelection()
{
  var i;
  var liste = document.getElementById("liste1");
  var tabItem = liste.getElementsByTagName("li");
  var msg = "";
  
  for (i=0;i<tabItem.length;i++)
  {
    if (tabItem[i].className == "itemSelectione")
    {
      msg += "item "+i+" " ;
    }
  }
  
  alert("votre sélection : "+msg);
}
//-->
</script>
 
</head>
 
<body>
 
<div class="conteneurListe">
  <ul id="liste1">
    <li class="item" onclick="selectionItem(this)">Choix 0</li>
    <li class="item" onclick="selectionItem(this)">Choix 1</li>
    <li class="item" onclick="selectionItem(this)">Choix 2</li>
    <li class="item" onclick="selectionItem(this)">Choix 3</li>
    <li class="item" onclick="selectionItem(this)">Choix 4</li>
    <li class="item" onclick="selectionItem(this)">Voici un très long texte pour cette 5ème option</li>    
    <li class="item" onclick="selectionItem(this)">Choix 6</li>
    <li class="item" onclick="selectionItem(this)">Choix 7</li>
    <li class="item" onclick="selectionItem(this)">Voici un autre très long texte pour cette 8ème option</li>
    <li class="item" onclick="selectionItem(this)">Choix 9</li>
    <li class="item" onclick="selectionItem(this)">Choix 10</li>        
  </ul>
</div>
<br><br>
<input type="button" value="cliquez ici pour afficher votre sélection" onclick="afficheSelection()" />
 
 
 
</body>
</html>