scrollbar d'une balise select

**TwAzO** · 26/05/2008, 11h04

Bonjour à tous les membres de developpez.com!!

Alors voilà j'ai une petite question. Je dois créer un formulaire imprimable contenant des balises "select". Le problème c'est que pour le rendre plus joli, il faudrait supprimer la petite flèche du select (ou la rendre invisible).

J'ai beaucoup cherché et je me demande si c'est possible de le faire au moins...

Si vous avez des réponses, je vous en serai éternellement reconnaissant

Merci @++

**SpaceFrog** · 26/05/2008, 11h09

pas avac un select, mais tu peux emuler les select avec des ul des li et un peu de javascript ...

ou doubler tes selects d'input texte que tu renseignes sur le onchange du select et tu joues du media screen et du media print ...

**TwAzO** · 26/05/2008, 11h12

Je ne connais pas toutes ces fonctions...

Pourrais-tu me donner une ligne d'exemple stp? (Pour la méthode la plus simple)
Merci!!

**sterix92** · 26/05/2008, 18h04

Bonjour,

Voici un script de demonstration pour simuler un select avec scroll :

Code :

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
<html>
 
<head>
 
<style>
 
#liste li {
        cursor:pointer;
}
 
</style>
 
<script>
function ouvrir_liste() {
        if ( document.getElementById('div_liste').style.display=="block" ) document.getElementById('div_liste').style.display="none";
        else document.getElementById('div_liste').style.display="block";
}
 
function selectionner_liste(valeur) {
        document.getElementById('cible').innerHTML=valeur;
        document.getElementById('div_liste').style.display="none";
}
</script>
 
</head>
 
<body>
 
<div style="width:90px;height:20px;padding:0;margin:0;">
 
<div style='"width:90px;height:20px;background-color:red;'>
	<div id="cible" style='display:inline;width:70px;height:22px;padding:0;margin:0;'>Nom_1</div>
	<div style='background-color:yellow;padding:3px;cursor:pointer;display:inline;width:15px;height:22px;margin:0;font-weight:bold;font-size:12px;' onClick="ouvrir_liste();">V&nbsp;</div>
</div>
 
<div id="div_liste" style="display:none;border-left:1px solid blue;border-bottom:1px solid blue;border-top:1px solid blue;width:90px;height:39px;padding:0;margin:0;overflow-y:scroll;">
	<ul id="liste" style='padding:0;margin:0;width:70px;list-style-type: none;overflow-y:hidden;'>
                <li onClick="selectionner_liste('Nom_1')">Nom_1</li>
		<li onClick="selectionner_liste('Nom_2')">Nom_2</li>
		<li onClick="selectionner_liste('Nom_3')">Nom_3</li>
		<li onClick="selectionner_liste('Nom_4')">Nom_4</li>
		<li onClick="selectionner_liste('Nom_5')">Nom_5</li>
	</ul>
</div>
 
</div>
 
</body>
 
</html>

J'espere que ca t'aidera

Cordialement,

**TwAzO** · 27/05/2008, 07h39

Merci pour ton script qui m'a bien aidé (c'est exactement ce que je voulais faire)

J'ai supprimé la flèche jaune car je voulais cacher entièrement la scrollbar avant l'impression du formulaire ^^

A TOUS!!!

scrollbar d'une balise select

HTML

Discussions similaires

Partager

Partager