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.
Plus dans Champs
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.