web-dev-qa-db-fra.com

Icône d'image HTML5 pour espace réservé d'entrée

J'aimerais ajouter une icône d'image à un espace réservé d'entrée, comme dans cette image: enter image description here

Veuillez noter qu'il s'agit d'un espace réservé. Ainsi, lorsque l'utilisateur commence à taper, l'icône disparaît également.

Je suis arrivé avec la solution suivante pour webkit (Safari + Chrome) en utilisant ::-webkit-input-placeholder et ::before. Malheureusement, l’application directe à Mozilla ne semble pas fonctionner.

Ma question est donc la suivante: existe-t-il une solution multi-navigateur pour ajouter une icône d’image à un espace réservé d’entrée?

Solution pour webkit:

#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}
csshtml5cross-browserplaceholder
20
ecesena
  1. Vous pouvez le définir en tant que background-image et utiliser text-indent ou une padding pour décaler le texte vers la droite.
  2. Vous pouvez le diviser en deux éléments.

Honnêtement, j'éviterais d'utiliser HTML5/CSS3 sans un bon repli. Trop de personnes utilisant d'anciens navigateurs ne prennent pas en charge toutes les nouveautés sophistiquées. Cela prendra un certain temps avant que nous puissions abandonner le repli, malheureusement :(

La première méthode que j'ai mentionnée est la plus sûre et la plus simple. Javascript nécessite de cacher l’icône dans les deux sens.

CSS:

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML:

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

Javascript:

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

25 septembre 2013

Je n'arrive pas à croire que j'ai dit "JavaScript nécessite, dans les deux sens, de masquer l'icône", car ce n'est pas tout à fait vrai.

Le moment le plus courant pour masquer le texte d'espace réservé est le changement, comme suggéré dans cette réponse. Pour les icônes, il est toutefois correct de les masquer, ce qui peut être fait en CSS avec la pseudo-classe active.

#search:active { background-image: none; }

Heck, en utilisant CSS3 vous pouvez le faire disparaître!

http://jsfiddle.net/2tTxE/

5 novembre 2013

Bien sûr, il y a aussi les pseudo-éléments CSS3 :: before. Attention cependant au support du navigateur!

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

54
Tim S.

`CSS:

input#search{
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 text-indent: 20px;
}

input#search:focus{
 background-image:none;
}

HTML:

<input type="text" id="search" name="search" value="search" />`
7
shumail rafique

Je ne sais pas s’il existe une meilleure réponse avec le temps, mais c’est simple et cela fonctionne;

input[type='email'] {
  background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
  background-image: none;
}

Donnez-lui un style.

0
Chris Pink