barre horizontale+select multiple

**khadir** · 13/08/2008, 17h49

Bonjour a tous,
Est ce qui'il est possible d'ajouter un barre de defilement en bas s'une liste deroulante de type select multipl ?

Merci d'avance

**Auteur** · 13/08/2008, 20h05

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 css :

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

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

barre horizontale+select multiple

HTML

Vue hybride

Discussions similaires

Partager

Partager