Formulaires CSS
L'apparence d'un formulaire HTML peut être grandement améliorée avec CSS :
Styler les champs de saisie
Utilisez la widthpropriété pour déterminer la largeur du champ de saisie :
Exemple
input
{
width: 100%;
}
L'exemple ci-dessus s'applique à tous les éléments <input>. Si vous souhaitez uniquement styliser un type d'entrée spécifique, vous pouvez utiliser des sélecteurs d'attribut :
input[type=text]- ne sélectionnera que les champs de texteinput[type=password]- ne sélectionnera que les champs de mot de passeinput[type=number]- ne sélectionnera que les champs numériques- etc..
Entrées rembourrées
Utilisez la paddingpropriété pour ajouter de l'espace à l'intérieur du champ de texte.
Conseil : Lorsque vous avez plusieurs entrées les unes après les autres, vous pouvez également en ajouter quelques margin-unes pour ajouter plus d'espace en dehors d'elles :
Exemple
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Notez que nous avons défini la box-sizingpropriété sur
border-box. Cela garantit que le rembourrage et éventuellement les bordures sont inclus dans la largeur et la hauteur totales des éléments.
En savoir plus sur la box-sizingpropriété dans notre chapitre CSS Box Sizing .
Entrées encadrées
Utilisez la borderpropriété pour modifier la taille et la couleur de la bordure, et utilisez la border-radiuspropriété pour ajouter des coins arrondis :
Exemple
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Si vous ne voulez qu'une bordure inférieure, utilisez la border-bottompropriété :
Exemple
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Entrées colorées
Utilisez la background-colorpropriété pour ajouter une couleur d'arrière-plan à l'entrée et la colorpropriété pour modifier la couleur du texte :
Exemple
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Entrées ciblées
Par défaut, certains navigateurs ajoutent un contour bleu autour de l'entrée lorsqu'elle obtient le focus (cliqué dessus). Vous pouvez supprimer ce comportement en ajoutant outline: none;à l'entrée.
Utilisez le :focussélecteur pour faire quelque chose avec le champ de saisie lorsqu'il obtient le focus :
Exemple
input[type=text]:focus
{
background-color: lightblue;
}
Exemple
input[type=text]:focus
{
border: 3px solid #555;
}
Entrée avec icône/image
Si vous voulez une icône à l'intérieur de l'entrée, utilisez la background-imagepropriété et positionnez-la avec la background-positionpropriété. Notez également que nous ajoutons un grand rembourrage à gauche pour réserver l'espace de l'icône :
Exemple
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Entrée de recherche animée
Dans cet exemple, nous utilisons la propriété CSS transitionpour animer la largeur de l'entrée de recherche lorsqu'elle obtient le focus. Vous en apprendrez plus sur la
transitionpropriété plus tard, dans notre chapitre Transitions CSS .
Exemple
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Styliser les zones de texte
Astuce : Utilisez la resizepropriété pour empêcher le redimensionnement des zones de texte (désactivez le "grabber" dans le coin inférieur droit) :
Exemple
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Menus de sélection de style
Exemple
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Styler les boutons d'entrée
Exemple
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Pour plus d'informations sur la façon de styliser les boutons avec CSS, lisez notre didacticiel sur les boutons CSS .
Formulaire réactif
Redimensionnez la fenêtre du navigateur pour voir l'effet. Lorsque l'écran mesure moins de 600 pixels de large, empilez les deux colonnes l'une sur l'autre plutôt que l'une à côté de l'autre.
Avancé : l'exemple suivant utilise des requêtes multimédias pour créer un formulaire réactif. Vous en apprendrez plus à ce sujet dans un chapitre ultérieur.