Input with Icon
Une icône à gauche du champ qui se réveille au focus : elle passe en indigo, grossit de 15 % et penche de 10°, pendant que le cadre s'allume. Icône SVG au choix.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le champ .iin-input garde 48 px de marge intérieure à gauche ; l'icône .iin-icon, un SVG de 20 px, occupe cette marge en position absolue (left: 16px, centrée verticalement par top: 50% et translateY(-50%)). Elle ne capte pas les clics : toucher l'icône place le curseur dans le champ.
Au focus, deux règles jouent ensemble. .iin-input:focus passe la bordure de 2 px en #6366f1 et teinte le fond. .iin-input:focus ~ .iin-icon colore l'icône en indigo et ajoute scale(1.15) rotate(-10deg) au centrage vertical, en 0,3 s sur une courbe cubic-bezier(.4, 0, .2, 1). Le petit basculement donne l'impression que l'icône répond au clic ; tout revient en place quand le champ perd le focus.
Le texte « E-mail » (.iin-caption) au-dessus du champ en est le libellé ; le placeholder votre@email.com n'est qu'un exemple de saisie. La racine .fx-0288-root ne sert qu'au cadre de démonstration (300 px, fond #0a0a0f).
Accessibilité
- Libellé distinct de l'exemple : « E-mail » reste visible et nomme le champ pour les lecteurs d'écran, même quand le placeholder a disparu sous la saisie.
- Icône décorative : le SVG porte
aria-hidden="true"etfocusable="false", il n'est ni lu ni atteint au clavier. - Formulaire :
type="email",name="email"etautocomplete="email"sont fournis ; le navigateur vérifie le format, propose l'adresse enregistrée et ouvre le clavier e-mail sur téléphone. - Mouvement réduit : sous
prefers-reduced-motion: reduce, l'icône change seulement de couleur, sans grossir ni pivoter, et le cadre s'allume sans transition. - Focus : le cadre indigo de 2 px sur
#0a0a0fatteint 4,4:1, au-dessus du minimum de 3:1 demandé pour un indicateur de focus.
Compatibilité navigateur
Transformations et transitions CSS plus une variable de largeur : Chrome 49, Firefox 31, Safari 9.1. Vérifié dans Chromium, Firefox et WebKit : une deuxième copie s'anime seule pendant que la première ne bouge pas, au clic, au Tab et au toucher, à 390 px et sous mouvement réduit. Les captures montrent une saisie et un passage de champ en champ simulés par le script des scènes, qui n'est pas inclus dans le code vendu.
Sans transitions, l'icône et le cadre changent d'un coup ; sans variables CSS, la largeur retombe sur la valeur de l'élément parent.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0288-root">
<label class="iin-field">
<span class="iin-caption">E-mail</span>
<span class="iin-box">
<input class="iin-input" type="email" name="email" autocomplete="email" placeholder="votre@email.com">
<span class="iin-icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" focusable="false">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</span>
</span>
</label>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Icône (HTML — SVG dans .iin-icon) |
enveloppe 20 × 20 | Tout SVG utilisant stroke="currentColor" prend automatiquement le gris puis l'indigo. Une icône pleine demande fill="currentColor". |
Mouvement de l'icône (CSS — transform de la règle :focus ~ .iin-icon) |
scale(1.15) rotate(-10deg) |
Gardez toujours translateY(-50%) en tête de la valeur, sinon l'icône sort de son axe. rotate(0) pour un simple grossissement. |
Largeur (CSS — --iin-width) |
280 px | 100% pour remplir une colonne ou un widget ; bornée par max-width: 100%. |
| Couleurs (CSS) | icône #8b8b93 → #6366f1, cadre rgba(255, 255, 255, .1) → #6366f1 |
Quatre valeurs dans .iin-icon, .iin-input et leurs règles :focus. |
Libellé visible (HTML — .iin-caption) |
« E-mail » au-dessus | À retirer seulement quand le contexte nomme déjà le champ (barre de message, recherche) ; mettez alors aria-label sur le champ. |
Durée (CSS — transition) |
0,3 s | Même durée pour le cadre et l'icône ; au-delà de 0,4 s, le basculement paraît mou. |
FAQ
left: 16px par right: 16px sur .iin-icon et déplacez la marge de 48 px du côté droit (padding: 14px 48px 14px 16px). Le basculement à −10° reste joli dans les deux sens.:hover si vous tenez à un indice plus tôt.id ni script, chaque <label class="iin-field"> anime sa propre icône. Changez seulement le SVG, le libellé et les attributs type, name et autocomplete.
