IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

chrome background image sur input disparait si pré rempli


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de elcoyotos
    Homme Profil pro
    Amateur passionné
    Inscrit en
    Octobre 2006
    Messages
    496
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Amateur passionné

    Informations forums :
    Inscription : Octobre 2006
    Messages : 496
    Par défaut chrome background image sur input disparait si pré rempli
    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 : 196
Taille : 2,6 Ko
    Pré rempli
    Nom : 02.jpg
Affichages : 187
Taille : 2,7 Ko
    Merci d'avance de vos réponses ...

  2. #2
    Invité
    Invité(e)
    Par défaut
    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;
    }
    Dernière modification par Invité ; 20/02/2015 à 00h33.

  3. #3
    Membre éclairé Avatar de elcoyotos
    Homme Profil pro
    Amateur passionné
    Inscrit en
    Octobre 2006
    Messages
    496
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Amateur passionné

    Informations forums :
    Inscription : Octobre 2006
    Messages : 496
    Par défaut
    Alors là je suis bouche bée. Merci pour ce code qui fonctionne parfaitement !
    Une explication ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. affichage background-image sur un div
    Par bourriket dans le forum ASP.NET
    Réponses: 9
    Dernier message: 09/10/2008, 22h03
  2. Décalage de background image sur IE7
    Par rems033 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 19/04/2008, 18h52
  3. background-image sur div largeur 100%
    Par mrmaxpower dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 13/04/2008, 17h08
  4. [XSL-FO] Background-image sur tout le document
    Par fefay dans le forum XSL/XSLT/XPATH
    Réponses: 1
    Dernier message: 05/07/2007, 14h59
  5. background image sur une rangée
    Par zevince dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 25/04/2007, 17h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo