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 :

:before :after sur un input


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut :before :after sur un input
    Bonjour,

    Pour la mise en forme d'un formulaire, je viens de lire des articles sur le sujet et notamment des posts sur ce forum.

    Sur Safari, before appliqué à input fonctionne correctement mais pas sur FF ni Chr.

    J'ai la solution alternative d'englober input d'un span.

    Y-a-t-il une évolution sur ce sujet avec prise en compte sur les navigateurs récents (vue que ça marche sur Saf)?

    Merci pour vos réponses.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    J'ai la solution alternative d'englober input d'un span.
    il existe aussi les LABEL.

    Montres nous néanmoins ce que essaies de faire.

  3. #3
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="text" name="fname" id="fname" placeholder="Nom ou Société" autocomplete="off" tabindex="1" class="txtinput">

    Pour l'instant j'ai mis ça
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    #fname {background: #fff url('../img/form/users.png') 5px 4px no-repeat;
    }

    et j'ai essayé avec #fname:before

  4. #4
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Si vous souhaitez précéder le INPUT d'une image, votre technique n'est pas bonne (mais néanmoins faisable). Perso, j'utiliserais effectivement un LABEL:
    Code html : 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
     
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="UTF-8" />
    	<title>Image précédant un input</title>
    	<style type="text/css">
    div::before {
            content: "\00A0\00A0\00A0\00A0"; /* Trois espaces */
            background: black url(http://www.developpez.net/forums/images/editor/smilie.gif);
    }
    label img {
            background-color: black;
            vertical-align: middle;
    }
            </style>
    </head>
    <body>
    <!-- AVEC UN ::BEFORE -->
    <div>
    	<input type="text" name="fname" id="fname" placeholder="Nom ou Société" autocomplete="off" tabindex="1" class="txtinput" />
    </div>
    <hr />
    <!-- AVEC LABEL -->
    <label for="fname">
    	<img src="http://www.developpez.net/forums/images/editor/smilie.gif" />
    	<input type="text" name="fname" id="fname" placeholder="Nom ou Société" autocomplete="off" tabindex="1" class="txtinput" />
    </label>
    </body>
    </html>

    J'ai essayé avec DISPLAY:LIST-ITEM en ajoutant une image comme puce, mais sans succès -_-

  5. #5
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    J'avais essayé en englobant input d'un span, auquel j'appliquais :before (comme votre div) mais ça faisait sauter mon placeholder.

  6. #6
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Je pense avoir trouvé:

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    label[for="fname"]:before

    Ça à l'air d'être stable.

    Merci pour vos conseils à tous.

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

Discussions similaires

  1. Simulation du bouton Parcourir sur un input file
    Par mego dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 02/08/2006, 19h44
  2. Placer le curseur sur un input
    Par griese dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 21/07/2006, 15h10
  3. Fonction reset sur un input="image"
    Par zave dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 23/03/2006, 18h07
  4. [Trigger] -recursivité before|after insert
    Par jacquesh dans le forum Oracle
    Réponses: 3
    Dernier message: 24/11/2005, 15h10
  5. focus sur une input text
    Par mic79 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 05/01/2005, 18h06

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