Problème de style CSS sur champ input text

**elekaj34** · 14/12/2011, 08h43

Bonjour,

Sur un formulaire, avec un champ input défini comme ci-dessous :

Code :

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

<input class="formFieldInput" type="text" name="login"/>

et le CSS associé

Code :

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

1
2
3
4
5
6
7
input.formFieldInput {
	font-size: 1em;
	height: 20px; line-height: 20px;
	padding-left: 2px;
	vertical-align: middle;
	border: 1px solid #616161;
}

ou pire celui ci :

Code :

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

input.formFieldInput { }

Sous IE (8 et 9, j'ai pas testé les autres) mes input son totalement transparent, y compris la bordure

Aucun soucis sur les autres navigateurs.

Pour info je suis en XHTML 1.0 Transitional avec un code HTML valide et les CSS valide.

Si je supprime la classe CSS de mes input, tout rentre dans l'ordre

!
Sauf que bien sur les champs ne sont plus styliser comme je le voudrais

Est il possible de styliser les champs input ? (sous IE je veux dire)
Si oui, où est ce que se situe le problème (dans mon code) ?

Merci pour votre aide !

**Sekigawa** · 14/12/2011, 09h24

Salut !

Alors ça c'est bizarre !!

T'as essayé d'enlever 1 à 1 les propriétés css ? Ou de tester avec l'outil pour développeur d'IE ?

Ou juste de déclaré :

Code :

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

1
2
3
4
5
6
7
.formFieldInput {
	font-size: 1em;
	height: 20px; line-height: 20px;
	padding-left: 2px;
	vertical-align: middle;
	border: 1px solid #616161;
}

Franchement je vois pas lol Et je suis curieux de savoir où est le problème ^^

**Torgar** · 14/12/2011, 09h51

Bonjour,

Aucun problème pour ma part avec ce code sous IE (7-8-9) :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR" class="no-js">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
 
    </script>    
    <style type="text/css">
    input.formFieldInput {
        font-size: 1em;
        height: 20px;
        line-height: 20px;
        padding-left: 2px;
        vertical-align: middle;
        border: 1px solid #616161;
        background-color: #ddddf4; /* test */
    }
    </style>
</head>
 
<body>
    <form action="" method="post">
        <input class="formFieldInput" type="text" name="login" />
    </form>
</body>
</html>