Champ de saisie
Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 52 sur 76.
Défi
FacileDans cette leçon, nous allons améliorer l’apparence des champs de saisie afin de les rendre faciles à utiliser.
Stylez les champs <input>. Suivez les étapes ci-dessous :
- Rendez-les larges à 100 % afin qu’ils s’intègrent bien au formulaire.
- Ajoutez du rembourrage afin que le texte à l’intérieur ne touche pas les bords.
- Appliquez une bordure d’une couleur douce.
- Arrondissez les coins.
- Ajoutez une marge entre les champs de saisie afin qu’ils ne paraissent pas trop rapprochés.
- Utilisez box-sizing: border-box; afin que la largeur inclue le rembourrage et les bordures.
Essayez vous-même
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Toutes les leçons de Style avec CSS
4Fondamentaux du texte
Couleur du texteFamille de policesTaille de policeGraisse de la policeAlignement du texteDécoration du texteDéfi récapitulatif n° 1Défi récapitulatif n° 27Modèle de boîte – Partie 1
Qu’est-ce que le modèle de boîte ?Espacement intérieurMargesBorduresLargeur et hauteurDéfi récapitulatif
5Couleurs et arrière-plans
Couleur d’arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n° 18Modèle de boîte – Partie 2
Dimensionnement des boîtesRayon de bordureDébordementOmbre de boîteDéfi récapitulatifEntraînez-vous par vous-même : Playground Web