AIMRAN
HTML + CSSChamps

Champ souligné depuis le centre

Une simple ligne fine sous le texte ; au focus, une ligne en dégradé s’ouvre depuis le centre.

Réglages

16px
1x

Code

<label class="uv-in2u"><input placeholder="Nom"><i></i></label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Champs

Voir tout : Champs

Champ à label flottant

ChampsReact + Motion

Interrupteur toggle

ChampsReact + Motion

Barre de recherche voyage

ChampsReact + Motion

Sélecteur de quantité

ChampsReact + Motion

Saisie de code OTP

ChampsReact + Motion

Toggle style iOS

ChampsReact + Motion

Curseur de fourchette de prix

ChampsReact + Motion

Libellé flottant coloré

ChampsHTML + CSS

Où l’utiliser

Pas de cadre, pas de fond, juste une ligne. Ce style épuré va aux pages où le design parle de lui-même : le formulaire de contact du portfolio d’une photographe, l’inscription à la newsletter d’un magazine en ligne ou la réponse à un faire-part de mariage. La ligne qui s’ouvre au centre signale le focus. Un champ souligné animé en CSS.

Au repos, la ligne est très claire : vérifiez-la sur votre vrai fond, il faudra peut-être la foncer. Elle brille avec deux ou trois champs ; dans un long formulaire, des cadres se lisent plus facilement.