Attributs liste déroulante

**malabarbe** · 28/12/2009, 20h56

Bonsoir à tous,

Comment changer l'apparence du pointeur
de la souris dans une liste déroulante ?

**cahnory** · 28/12/2009, 21h34

En ajoutant cursor: pointer; (par ex.) sur l'élement select j'obtien bien une main sous safari. En revanche aucun changement sur les éléments de la liste que je mette la propriété sur select ou sur option.

**malabarbe** · 28/12/2009, 21h39

J'en suis aux mèmes résultats

Mème esseyé de l'encadrer par un div

Testé aussi sur FORM

Je suis sous IE

Aucuns tests ne fonctionnent

**cahnory** · 28/12/2009, 22h16

Les balises select se stylent très difficilement.
Comme à chaque fois qu'une chose est impossible à réaliser en html/css, tu peux apporter un plus à ceux qui ont js (une majorité mais tout de même, il ne faut pas fermer la porte à ceux qui ne l'ont pas).
Ça se traduit par quoi ?
En js, supprimer l'élément select et le remplacer par une liste ul li par exemple que tu pourras plus facilement habiller. Après, tu peux ajouter un champs hidden ayant pour nom celui de l'ancien select que tu rempliras en fonction du choix sur ta nouvelle liste. Si tu as besoin de plus de détails demande mais là on basculeras sur js

.

**malabarbe** · 28/12/2009, 22h24

Voici mon source car je maitrise mal JS

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<STYLE> 
	.option.cur:over {
		text-decoration: none;
		cursor:url(images/curvert6_f.cur); /*, auto;*/
	}
	.a.linkmenutop:visited {
		color: #FFFFFF;
		text-decoration: none;
	}
.cur { cursor:pointer; } /* Petite Main */
</style>
</head>
 
<body >
<div >
<form method="POST" action="--WEBBOT-SELF--" onmousemove="this.style.cursor='pointer'">
	<p><select size="1" name="D1" onmousemove="this.style.cursor='pointer'">
<option value="01" onmousemove="this.style.cursor='pointer'">Janvier</option>
<option value="02">Février</option>
<option value="03">Mars</option>
<option value="04">Avril</option>
<option value="05">Mai</option>
<option value="06">Juin</option>
<option value="07">Juillet</option>
<option value="08">Août</option>
<option value="09">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
	</select>
	<input type="submit" value="Envoyer" name="B1" onmouseover="this.style.cursor='pointer'">
	<input type="reset" value="Rétablir" name="B2"></p>
</form>
</div>
</body>
</html>

Si tu peut faire quelque chose

**cahnory** · 28/12/2009, 22h33

déjà tu peux te passer du onMouseOver... et oui, si le style de pointer d'un élément est forcément visible quand l'élément est survolé

.
Pour le js y a du taff et moi je n'utilise que jquery pour tout ce qui est modification du dom. En cherchant sur le net tu devrais facilement trouver des tuto sur comment changer un select en ul ou alors tu peux ouvrir un nouveau sujet sur le salon javascript.

Attributs liste déroulante

CSS

Vue hybride

Discussions similaires

Partager

Partager