Chapitre 14 : Stylisation des inputs textuels et zones de texte
Concepts clés : Sélecteurs d'attributs et propriétés de typographie sur les éléments de formulaire
L'expérience utilisateur (UX) d'un site web dépend énormément de la qualité de ses formulaires. Un champ de saisie mal stylisé peut paraître daté, peu fiable, voire être totalement illisible. Dans ce chapitre, nous allons apprendre à transformer les éléments de saisie bruts du navigateur en composants modernes, ergonomiques et visuellement cohérents.
Le Ciblage Précis avec les Sélecteurs d'Attributs
1. Quoi
Le sélecteur d'attribut est une fonctionnalité CSS qui permet de cibler un élément HTML non pas par sa classe ou son identifiant, mais par la présence ou la valeur d'un de ses attributs.
Pour les formulaires, c'est l'outil indispensable car la balise <input> est polymorphe : elle change radicalement de comportement et d'apparence selon l'attribut type (ex: text, password, checkbox, submit).
2. Pourquoi
Dans un projet professionnel, on évite d'ajouter des classes comme .input-text ou .input-email sur chaque champ. Pourquoi ? Parce que c'est redondant. Le HTML définit déjà la nature du champ via l'attribut type. Utiliser les sélecteurs d'attributs permet de :
- Réduire la quantité de HTML (moins de classes).
- Garantir la cohérence : tous les champs de type "email" auront le même style sans exception.
- Faciliter la maintenance : modifier le style de tous les champs textuels se fait en une seule règle CSS.
3. Comment
A. Syntaxe de base
La syntaxe utilise des crochets [] entourant l'attribut et sa valeur.
/* Cible tous les inputs ayant l'attribut type="text" */
input[type="text"] {
border: 2px solid blue;
}
/* Cible tous les inputs ayant l'attribut type="password" */
input[type="password"] {
background-color: #f0f0f0;
}
B. Cas concret : Un système de saisie moderne
Voici comment styliser un groupe de champs textuels pour obtenir un rendu professionnel, incluant la gestion des zones de texte (textarea).
/* 1. Styles communs à tous les champs de saisie textuelle */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
width: 100%;
padding: 12px 16px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Indispensable pour que le padding ne change pas la largeur */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px; /* Évite le zoom automatique sur iOS lors du focus */
transition: border-color 0.2s, box-shadow 0.2s;
}
/* 2. Style spécifique pour le textarea (zone de texte) */
textarea {
min-height: 120px;
resize: vertical; /* Permet à l'utilisateur d'agrandir verticalement mais pas horizontalement */
}
/* 3. État de focus pour l'accessibilité et le feedback visuel */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #4A90E2;
outline: none; /* On retire l'outline par défaut pour mettre notre propre style */
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}
C. Limitations
Le sélecteur d'attribut est très puissant, mais attention à la spécificité. Un sélecteur input[type="text"] est plus spécifique qu'un simple input. Si vous avez des styles contradictoires, c'est le sélecteur d'attribut qui gagnera.
De plus, certains navigateurs appliquent des styles par défaut très tenaces (notamment sur les boutons ou les checkboxes). Pour les inputs textuels, le problème principal est souvent le outline (le contour bleu/noir) qui varie selon le navigateur.
4. Zone de Danger
❌ Erreur commune : Utiliser width: 100% sans box-sizing: border-box.
Résultat : Le champ dépasse de son conteneur car le padding s'ajoute à la largeur de 100%.
✅ Bonne pratique : Toujours définir box-sizing: border-box sur les éléments de formulaire pour que la largeur inclue le padding et la bordure.
Logique de ciblage par sélecteur d'attributs
Typographie et Ergonomie des Saisies
1. Quoi
La typographie dans un formulaire ne concerne pas seulement l'esthétique, mais surtout l'utilisabilité. Elle englobe le choix de la police, la taille des caractères, l'espacement interne (padding) et la gestion du texte d'invite (placeholder).
2. Pourquoi
Un texte trop petit dans un champ de saisie fatigue l'utilisateur. Un placeholder trop clair est illisible pour les personnes malvoyantes. Une police non proportionnelle (comme Courier) peut être utile pour des codes, mais déconseillée pour des noms d'utilisateur.
3. Comment
A. Gestion du Placeholder
Le placeholder est un texte indicatif. On peut le styliser via un pseudo-élément spécifique.
/* Stylisation du texte d'invite */
input::placeholder,
textarea::placeholder {
color: #aaa;
font-style: italic;
font-size: 0.9em;
}
B. Optimisation de la lecture
Pour rendre un formulaire agréable, on joue sur le contraste et l'espacement.
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-weight: 600;
margin-bottom: 5px;
color: #333;
font-size: 14px;
}
/* On s'assure que le texte saisi est bien lisible */
input[type="text"] {
color: #2c3e50;
letter-spacing: 0.5px;
}
C. Limitations
Le placeholder ne doit jamais remplacer un <label>. Une fois que l'utilisateur commence à écrire, le placeholder disparaît. Si l'utilisateur oublie ce qu'il devait saisir, il doit effacer son texte pour revoir l'indice. C'est une erreur d'accessibilité majeure.
4. Zone de Danger
❌ Erreur commune : Mettre une taille de police inférieure à 16px sur les inputs mobiles.
Résultat : Sur iOS (Safari), le navigateur effectue un zoom automatique et décentre la page dès que l'utilisateur clique sur le champ, ce qui est très perturbant.
✅ Bonne pratique : Utiliser font-size: 16px minimum pour tous les champs de saisie destinés aux mobiles.
Questions clés
1. Quelle est la différence entre cibler input et input[type="text"] ?
Découvrir la réponse
Cibler input applique le style à TOUS les types d'inputs (boutons, checkboxes, radios, texte). Cibler input[type="text"] restreint le style uniquement aux champs de saisie de texte simple, évitant ainsi de casser l'apparence des boutons ou des cases à cocher.
2. Pourquoi utiliser box-sizing: border-box sur un input ?
Découvrir la réponse
Par défaut, le modèle de boîte CSS ajoute le padding et la bordure à la largeur définie. Si un input a width: 100% et padding: 10px, sa largeur réelle sera 100% + 20px, ce qui le fera déborder de son parent. border-box force le navigateur à inclure le padding et la bordure à l'intérieur des 100%.
3. Comment empêcher un utilisateur d'agrandir un textarea horizontalement ?
Découvrir la réponse
On utilise la propriété resize: vertical;. Cela permet à l'utilisateur d'ajuster la hauteur de la zone de texte pour son confort, tout en préservant la mise en page horizontale du site.
4. Pourquoi le pseudo-élément ::placeholder est-il utile ?
Découvrir la réponse
Il permet de modifier l'apparence du texte d'aide (couleur, police) sans affecter le texte que l'utilisateur saisit réellement. Cela permet de créer une distinction visuelle claire entre l'indice et la donnée.
Mise en pratique
Exercice 1 : Reproduction guidée
Objectif : Créer un champ de saisie "épuré" (Minimalist Input).
Consignes :
- Créez un HTML avec un
inputde typetextet unlabel. - Appliquez un style où la bordure supérieure est invisible, et seule la bordure inférieure est visible (épaisseur 2px, couleur grise).
- Au focus, la bordure inférieure doit devenir bleue et s'épaissir.
- Supprimez l'outline par défaut du navigateur.
Découvrir la solution commentée
<div class="field">
<label for="name">Nom complet</label>
<input type="text" id="name" placeholder="Ex: Jean Dupont">
</div>
.field {
display: flex;
flex-direction: column;
width: 300px;
}
.field label {
font-size: 12px;
text-transform: uppercase;
color: #666;
margin-bottom: 1rem;
}
.field input {
border: none;
border-bottom: 2px solid #ccc; /* Uniquement la ligne du bas */
padding: 1rem 0;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.field input:focus {
border-bottom: 2px solid #007BFF; /* Changement de couleur au focus */
}
Exercice 2 : Adaptation
Objectif : Adapter le style de l'exercice 1 pour prendre en compte différents types d'inputs.
Repartez du code de l'exercice 1 et ajoutez deux champs supplémentaires pour obtenir :
<div class="field">
<label for="name">Nom complet</label>
<input type="text" id="name" placeholder="Ex: Jean Dupont">
</div>
<div class="field">
<label for="pwd">Mot de passe</label>
<input type="password" id="pwd" placeholder="••••••••">
</div>
<div class="field">
<label for="mail">Email</label>
<input type="email" id="mail" placeholder="email@exemple.com">
</div>
Consignes :
- Le style "underline" de l'exercice 1 doit s'appliquer aux trois types à la fois.
- Le champ
passworddoit avoir un fond légèrement gris (#f9f9f9) pour le distinguer visuellement. - Le champ
emaildoit avoir une bordure gauche colorée (verte, 4px) pour indiquer qu'il s'agit d'un champ de contact.
Découvrir la solution commentée
.field {
display: flex;
flex-direction: column;
width: 300px;
margin-bottom: 1rem;
}
.field label {
font-size: 12px;
text-transform: uppercase;
color: #666;
margin-bottom: 1rem;
}
/* Styles communs aux trois types via les sélecteurs d'attributs */
input[type="text"],
input[type="password"],
input[type="email"] {
border: none;
border-bottom: 2px solid #ccc;
padding: 1rem 0;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border-bottom: 2px solid #007BFF;
}
/* Spécificité Password : fond gris pour distinguer le champ */
input[type="password"] {
background-color: #f9f9f9;
}
/* Spécificité Email : indicateur visuel vert à gauche */
input[type="email"] {
border-left: 4px solid #2ecc71;
padding-left: 0.5rem;
}
Exercice 3 : Conception
Objectif : Concevoir un formulaire de contact professionnel et accessible.
Consignes :
- Créez un formulaire avec : Nom (text), Email (email), et Message (textarea).
- Implémentez un design "Card" (fond blanc, ombre légère, coins arrondis).
- Le
textareadoit être limité à un agrandissement vertical. - Le
placeholderdoit être en gris clair et en italique. - Ajoutez un effet de transition douce sur tous les champs lors du focus (couleur de bordure et ombre portée).
Découvrir la solution commentée
<div class="contact-card">
<h2>Contactez-nous</h2>
<div class="form-group">
<label for="user-name">Nom</label>
<input type="text" id="user-name" placeholder="Votre nom...">
</div>
<div class="form-group">
<label for="user-email">Email</label>
<input type="email" id="user-email" placeholder="email@exemple.com">
</div>
<div class="form-group">
<label for="user-msg">Message</label>
<textarea id="user-msg" placeholder="Comment pouvons-nous vous aider ?"></textarea>
</div>
</div>
.contact-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
max-width: 500px;
margin: 2rem auto;
font-family: sans-serif;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #444;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
transition: all 0.3s ease;
}
textarea {
min-height: 100px;
resize: vertical;
}
input::placeholder,
textarea::placeholder {
color: #bbb;
font-style: italic;
}
input:focus,
textarea:focus {
outline: none;
border-color: #6c5ce7;
box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.1);
}