Campo di input
Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 52 di 76.
Sfida
FacileIn questa lezione miglioreremo l’aspetto dei campi di input per renderli più intuitivi.
Stilizza i campi <input>. Segui i passaggi seguenti:
- Imposta una larghezza del 100% in modo che si adattino bene al modulo.
- Aggiungi padding affinché il testo al loro interno non tocchi i bordi.
- Applica un bordo di colore tenue.
- Arrotonda gli angoli.
- Aggiungi un po’ di margine tra i campi di input, in modo che non sembrino troppo vicini tra loro.
- Usa box-sizing: border-box; affinché la larghezza includa padding e bordi.
Provalo tu
<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>
Tutte le lezioni di Stilizzare con CSS
4Fondamenti del testo
Colore del testoFamiglia di caratteriDimensione del carattereSpessore del carattereAllineamento del testoDecorazione del testoSfida di ripasso #1Sfida di ripasso #27Modello a scatola - Parte 1
Cos'è il modello a scatola?Spaziatura internaMarginiBordiLarghezza e altezzaSfida di riepilogo
8Modello a scatola Parte 2
Dimensionamento del boxRaggio del bordoOverflowOmbra del boxSfida di ripassoEsercitati da solo: Playground Web