chrome background image sur input disparait si pré rempli

**elcoyotos** · 19/02/2015, 18h32

Bonjour,

Est ce que quelqu'un sait pourquoi, sous chrome (40.0), quand un input est pré rempli, le background image disparait ?
Voici le code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body{
        padding:0;
        margin: 0;
        font-size:0.8em;
        color: #fff;
        font-family: Tahoma,arial,helvetica,sans-serif;
        margin-left:200px;
    }
    .template_commun_sous_menu_droite_coyotos_login {
		background:url(http://www.arizona-dream.com/usa/photos/template/charte/sprite_charte.png); 
		background-position: 0 -747px;
		height: 16px;
		padding-left: 20px;
		width:130px;
	}
    .template_commun_sous_menu_droite_coyotos_password {
		background:url(http://www.arizona-dream.com/usa/photos/template/charte/sprite_charte.png);
		background-position: 0 -768px;
		height: 16px;
		padding-left: 20px;
		width:130px;
	}
    </style>
</head>
 
 
<body>
    <p><input name="login" type="text" placeholder="Votre pseudo" data-validation-placeholder="Votre pseudo" class="template_commun_sous_menu_droite_coyotos_login" id="login2" maxlength="25" /></p>
    <p><input name="password" type="password" id="password2" placeholder="Votre mot de passe" class="template_commun_sous_menu_droite_coyotos_password" maxlength="32" /></p>
</body>
</html>

Et un exemple en image :
Non pré rempli
Nom : 01.jpg
Affichages : 198
Taille : 2,6 Ko

Pré rempli
Nom : 02.jpg
Affichages : 189
Taille : 2,7 Ko

Merci d'avance de vos réponses ...

Invité · 20/02/2015, 00h16

Bonjour,
voici une façon de détourner le problème : http://codepen.io/jreaux62/pen/zxWJaj

Code html :

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

1
2
3
4
5
6
7
8
<p>
  <input name="login" type="text" placeholder="Votre pseudo" data-validation-placeholder="Votre pseudo" class="template_commun_sous_menu_droite_coyotos_login" id="login2" maxlength="25" value="" />
  <ins></ins>
</p>
<p>
  <input name="password" type="password" id="password2" placeholder="Votre mot de passe" class="template_commun_sous_menu_droite_coyotos_password" maxlength="32" value="" />
  <ins></ins>
</p>

Code css :

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
p {
   position:relative; /* important ici */
}
.template_commun_sous_menu_droite_coyotos_login {
   padding-left:20px;
   width:130px;
}
.template_commun_sous_menu_droite_coyotos_login ~ ins {
   position:absolute;
   content:'';
   width:16px; height:16px;
   left:2px; top:2px;
   background:url(http://www.arizona-dream.com/usa/photos/template/charte/sprite_charte.png) no-repeat; 
   background-position: 0 -747px;
}
.template_commun_sous_menu_droite_coyotos_password {
   padding-left:20px;
   width:130px;
}
.template_commun_sous_menu_droite_coyotos_password ~ ins {
   position:absolute;
   content:'';
   width:16px; height:16px;
   left:2px; top:2px;
   background:url(http://www.arizona-dream.com/usa/photos/template/charte/sprite_charte.png) no-repeat;
   background-position: 0 -768px;
}

**elcoyotos** · 20/02/2015, 17h42

Alors là je suis bouche bée. Merci pour ce code qui fonctionne parfaitement !

Une explication ?

chrome background image sur input disparait si pré rempli

CSS

Vue hybride

Discussions similaires

Partager

Partager