CSS Formulaires
Styliser les formulaires CSS
CSS est utilisé pour styliser les formulaires HTML. L'apparence d'un formulaire HTML peut être considérablement améliorée grâce à CSS :
Styliser les champs de saisie de formulaire
Avec CSS, vous pouvez styliser la plupart des types de saisie, comme les champs de texte, les champs de mot de passe, les cases à cocher, les boutons radio et les entrées de fichiers. Vous pouvez également styliser les étiquettes d'entrée et les boutons de formulaire.
Certaines propriétés CSS couramment utilisées pour styliser les champs de saisie sont :
Largeur des champs de saisie
La propriété largeur est utilisée pour définir la largeur d'un champ de saisie.
Astuce : La largeur par défaut d'un champ de texte HTML est de 20 caractères.
Ici, nous définissons la largeur à 100 % :
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'attributs :
-
input[type=text]- sélectionnera uniquement les champs de texte -
input[type=password]- sélectionnera uniquement les champs de mot de passe -
input[type=number]- sélectionnera uniquement les champs numériques - etc..
Styliser le remplissage des champs de saisie
La propriété remplissage est utilisée pour ajouter de l'espace à l'intérieur du champ de texte.
Astuce : Lorsque vous avez plusieurs champs de saisie les uns après les autres, vous voudrez peut-être également ajouter une marge pour ajouter plus d'espace autour d'eux :
Exemple
input[type=text] {
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
} Notez que nous avons défini la propriété box-sizing sur border-box . Cela garantit que le remplissage et éventuellement les bordures sont inclus dans la largeur et la hauteur totales des éléments.
Lisez-en plus sur la propriété box-sizing dans notre chapitre CSS Box Sizing .
Styliser la bordure des champs de saisie
La propriété bordure est utilisée pour changer la taille et la couleur de la bordure, et la propriété rayon de bordure peut être utilisée pour ajouter des coins arrondis :
Exemple
input[type=text] {
border: 2px solid red;
border-radius: 8px;
} Si vous ne voulez qu'une bordure inférieure, utilisez la propriété border-bottom :
Exemple
input[type=text] {
border: none;
border-bottom: 1px solid red;
} Styliser la couleur de fond et la couleur des champs de saisie
La propriété couleur de fond est utilisée pour ajouter une couleur de fond au champ de saisie, et la propriété couleur est utilisée pour changer la couleur du texte :
Exemple
input[type=text] {
background-color: #3CBC8D;
color: white;
} Styliser les champs de saisie au focus
Par défaut, certains navigateurs ajouteront un contour bleu autour du champ de saisie lorsqu'il obtient le focus (cliqué). Vous pouvez supprimer ce comportement en ajoutant outline: none; au champ de saisie.
Utilisez le sélecteur :focus pour appliquer un style au 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;
} Styliser les champs de saisie avec une icône/image
Si vous souhaitez ajouter une icône à l'intérieur du champ de saisie, utilisez la propriété image de fond et positionnez-la avec la propriété position de fond . Notez également que nous ajoutons un grand remplissage à gauche pour réserver l'espace pour 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;
} Champ de recherche animé
Dans cet exemple, nous utilisons la propriété CSS transition pour animer la largeur du champ de recherche lorsqu'il obtient le focus. Vous en apprendrez plus sur la propriété transition plus tard, dans notre chapitre CSS Transitions .
Exemple
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Styliser une zone de texte
Par défaut, un <textarea> peut être redimensionné avec un "attrapeur" dans le coin inférieur droit. Pour supprimer l'attrapeur, définissez la propriété redimensionner sur none :
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;
} Styliser un menu déroulant
Exemple
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Styliser les boutons de formulaire
Les boutons de formulaire de type "button", "submit" et "reset" peuvent également être stylisés avec CSS :
Exemple
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Astuce : utilisez width: 100% pour des boutons pleine largeur */ Astuce : Pour plus d'informations sur la façon de styliser les boutons, lisez notre Tutoriel CSS sur les boutons .
Formulaire CSS réactif
L'exemple suivant utilise des requêtes média CSS pour créer un formulaire réactif. Vous en apprendrez plus sur les requêtes média dans un chapitre ultérieur.
Lorsque l'écran fait moins de 600px de large, nous faisons en sorte que les étiquettes et les champs de saisie s'empilent les uns sur les autres, au lieu d'être côte à côte.
Redimensionnez l'écran pour voir la mise en page du formulaire changer !