balise <select> et attribut focus sous ie et sous firefox

**tofito** · 03/06/2008, 15h57

Bonjour,

J'arrive à faire à peu près ce que je veux sous firefox au niveau design sur cette page... Les champs de saisie sont encadrés d'un liseron vert lorsqu'ils sont survolés ou que l'on saisit du texte dedans... Idem pour les listes déroulantes (les balises <select> donc...)

Sous IE le fonctionnement est tout autre... Pour les listes déroulantes, cela ne fonctionne plus, tandis que pour les champs de saisie, cela fonctionne au survol du champs (l'attribut hover marche donc) mais cela ne fonctionne plus lorsque l'on clique dedans ou que l'on y saisit du texte (l'attritbut focus ne fonctionne donc plus...)

Si quelqu'un a une idée d'amélioration de ce css afin qu'il fonctionne aussi bien sous ie que sous firefox, je lui en saurai gré...

Code :

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

1
2
3
4
5
 
input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus, textarea:hover, textarea:focus, select:hover, select:focus
{
	border: 2px solid #b1f760; 
}

**Er3van** · 03/06/2008, 16h18

Sous IE...6 ?

Normal, les pseudo-classes comme :hover, :focus...., ne sont utilisables que pour l'élément lien (a).

Sinon, pas de raison particulière pour que ça ne marche pas.

Pour parer à ça, passe par du JS.

Un lien pour personnaliser un formulaire avec CSS et JS.

**tofito** · 03/06/2008, 18h27

merci

**tonio2405** · 27/07/2009, 15h09

Je remonte un post un peu vieux, mais le sujet n'est toujours pas résolu ...

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
 
<script type="text/javascript">
function init(){
var plop = document.getElementById('plop');
plop.onmouseover=function() { alert('plop');}; 
}
</script>
<style type="text/css">
	option:hover{
		background-color: #d0e3fa;
	}
</style>
</head>
<body onload="init()">
	<select size="10" name="liste2" id="select" style="width:250px;height:50%;overflow:auto">
		<option id="plop">test1</option>
		<option>test2</option>
		<option>test3</option>
		<option>test4</option>
 
	</select>

ne fonctionne toujours pas sous IE (ni le javascript, ni le CSS). Existe-t-il une solution viable pour faire un hover sur les options d'un select sous IE ? Je suis sous IE8 et ce code ne fonctionne toujours pas ... Marre de ce navigateur.

balise <select> et attribut focus sous ie et sous firefox

CSS

Discussions similaires

Partager

Partager