Dans ce tutoriel, je vous montre comment faire des champs de saisie avec une icône de façon plutôt simple :


L’avantage du code qui suit, c’est qu’il est relativement propre, pure-CSS, accessible, très simple à comprendre et totalement flexible : l’ensemble reste manipulable avec vos propres styles sans tout foutre en l’air.
À ce jour, il est également très bien supporté par la majorité des navigateurs récents.

Commençons !

En HTML, un champ <input> devrait toujours être accompagnée de son étiquette <label> :

<label for="pseudo">Votre pseudo :</label>
<input id="pseudo" />

Plaçons l’ensemble dans un conteneur :

<div class="input-container">
    <label for="pseudo">Votre pseudo :</label>
    <input id="pseudo" />
</div>

Maintenant, il suffit d’utiliser les flex box pour les aligner côte à côte et de donner une hauteur au conteneur :

.input-container {
    display: flex;
    height: 24px;
}

input-container > input {
    flex: 1;
}

On veut une icône à la place du label. Très bien : on va placer en fond sur ce dernier.
Pour ne pas afficher le texte qu’il contient, on va également lui donner une largeur définie (celle de l’icône), masquer ce qui se dépasse (avec overflow) et faire en sorte que le texte soit entièrement sorti du champ de vision du label (avec box-sizing et padding).

Le CSS devient alors :

.input-container {
    display: flex;
}

input-container > input {
    flex: 1;
}

input-container > label {
    width: 24px;
    padding-left: 24px;
    box-sizing: border-box;
    overflow: hidden;
    background: url(icone.png);
}

Et c’est tout !
Vous n’avez pas besoin de vous occuper du centrage vertical (flex le fait pour vous), ni de la taille relative du champ et de son label (flex le fait tout seul aussi).
Vous n’avez pas non plus à souffrir en manipulant les ::before, le positionnement ou les flottants.

En plus de ça, vous pouvez évidemment ajouter vos propres styles, y compris des bordures et des marges : ça restera centré et aligné (merci flex !).
Cerise sur le gâteau : non seulement votre icône est cliquable comme doit l’être un bon label, mais si vous désactivez le CSS le formulaire reste entièrement accessible : le texte du label redevient alors visible :



(Inspiré de l’astuce ici)