Le regard d'un formulaire HTML peut être grandement améliorée avec CSS:
Styling Champs de saisie
Utilisez la width propriété pour déterminer la largeur de la zone de saisie:
L'exemple ci - dessus applique à tous les <input> éléments. Si vous voulez seulement le style d'un type d'entrée spécifique, vous pouvez utiliser les sélecteurs d'attributs:
-
input[type=text]- ne fera que sélectionner des champs de texte -
input[type=password]- ne fera que sélectionner des champs de mot de passe -
input[type=number]- va sélectionner uniquement les champs numériques - etc..
Entrées rembourrées
Utilisez le padding bien pour ajouter de l' espace à l' intérieur du champ de texte.
Astuce: Lorsque vous avez plusieurs entrées après l'autre, vous pourriez aussi ajouter une certaine margin , d'ajouter plus d' espace en dehors d'eux:
Exemple
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Essayez - le vous - même »  | Notez que nous avons mis le box-sizing propriété pour border-box . Cela fait en sorte que le rembourrage et éventuellement les frontières sont inclus dans la largeur et la hauteur des éléments. En savoir plus sur le box-sizing propriété dans notre CSS3 Box Sizing chapitre. |
|---|
Entrées avec bord
Utilisez la border propriété pour modifier la taille de la bordure et la couleur, et utilisez le border-radius propriété pour ajouter des coins arrondis:
Si vous voulez seulement une bordure inférieure, utilisez le border-bottom propriété:
Entrées de couleur
Utilisez le background-color propriété pour ajouter une couleur d'arrière - plan à l'entrée, et la color propriété pour changer la couleur du texte:
Entrées ciblées
Par défaut, certains navigateurs ajouter un contour bleu autour de l'entrée quand il obtient le focus (cliqué sur). Vous pouvez supprimer ce comportement , en ajoutant les outline: none; à l'entrée.
Utilisez le :focus sélecteur pour faire quelque chose avec le champ de saisie quand il obtient le focus:
Entrée avec l'icône / image
Si vous voulez une icône à l' intérieur de l'entrée, utilisez le background-image la propriété et le positionner avec le background-position propriété. Notez également que nous ajoutons un grand padding 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;
} Essayez - le vous - même » Animated Recherche d'entrée
Dans cet exemple , nous utilisons le CSS3 transition propriété pour animer la largeur de l'entrée de recherche quand il reçoit le focus. Vous en apprendrez plus sur la transition des biens plus tard, dans notre CSS3 Transitions chapitre.
Exemple
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Essayez - le vous - même » Styling Textareas
Astuce: Utilisez le resize des biens pour empêcher textareas d'être redimensionnée (désactiver le "grabber" dans le coin en bas à droite):
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;
} Essayez - le vous - même » Styling Sélectionnez Menus
Exemple
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Essayez - le vous - même » Styling 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 */ Essayez - le vous - même » Pour plus d' informations sur la façon de coiffer les boutons avec CSS, lisez notre CSS Buttons Tutorial .