scrollbar d'une balise select

Version imprimable

26/05/2008, 10h04
TwAzO

scrollbar d'une balise select

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

Merci @++ :scarymov:
26/05/2008, 10h09
SpaceFrog

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 ...
26/05/2008, 10h12
TwAzO

Je ne connais pas toutes ces fonctions...

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

Bonjour,

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

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

27/05/2008, 06h39
TwAzO

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

:salut: A TOUS!!! :chin: