Home esercizi css stile dei form

Esercizi Stile Form CSS

Rendi i tuoi moduli HTML più attraenti e user-friendly con queste esercitazioni di CSS. Impara a personalizzare i campi di input, i bottoni e gli elementi del form con regole CSS, migliorando l’esperienza degli utenti durante l’interazione.

Esercizio 1

Crea una pagina HTML con un campo di input di tipo testo. Usa il CSS per cambiare il colore del testo all'interno del campo di input in blu e impostare una larghezza del bordo di 2 pixel con colore rosso quando il campo di input ha il focus.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      input[type="text"] {
        color: blue;
        border: 1px solid black;
      }

      input[type="text"]:focus {
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <input type="text" placeholder="Inserisci il testo qui" />
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un campo di input di tipo password. Usa il CSS per cambiare il colore del testo all'interno del campo di input in verde quando il campo di input è stato compilato con un valore valido e in rosso quando il valore non è valido.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      input[type="password"] {
        color: red;
      }

      input[type="password"]:valid {
        color: green;
      }
    </style>
  </head>
  <body>
    <input type="password" required placeholder="Inserisci la password" />
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un campo di input di tipo email. Usa il CSS per cambiare il colore del testo all'interno del campo di input in blu quando il campo di input ha il focus, e in grigio quando è disabilitato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      input[type="email"] {
        color: grey;
      }

      input[type="email"]:focus {
        color: blue;
      }

      input[type="email"]:disabled {
        color: grey;
      }
    </style>
  </head>
  <body>
    <input type="email" placeholder="Inserisci l'indirizzo email" disabled />
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una casella di controllo (checkbox). Usa il CSS per cambiare il colore del testo della casella di controllo in verde quando è selezionata e in rosso quando non è selezionata.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      input[type="checkbox"] {
        color: red;
      }

      input[type="checkbox"]:checked {
        color: green;
      }
    </style>
  </head>
  <body>
    <label> <input type="checkbox" /> Seleziona questa casella </label>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un campo di input di tipo radio. Usa il CSS per cambiare il colore del testo dei pulsanti di opzione (radio buttons) in blu quando sono selezionati.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      input[type="radio"] {
        color: black;
      }

      input[type="radio"]:checked {
        color: blue;
      }
    </style>
  </head>
  <body>
    <label>
      <input type="radio" name="opzione" value="opzione1" /> Opzione 1
    </label>
    <label>
      <input type="radio" name="opzione" value="opzione2" /> Opzione 2
    </label>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con una casella di controllo (checkbox) e un pulsante (button). Usa il CSS per cambiare il colore del testo del pulsante in bianco e il colore di sfondo in verde quando la casella di controllo è selezionata, altrimenti il pulsante deve essere disabilitato e il testo deve essere grigio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      input[type="checkbox"]:checked + button {
        color: white;
        background-color: green;
      }

      button:disabled {
        color: grey;
      }
    </style>
  </head>
  <body>
    <label>
      <input type="checkbox" /> Seleziona la casella per abilitare il pulsante
    </label>
    <button disabled>Clicca qui</button>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un campo di input di tipo numero. Usa il CSS per cambiare il colore del testo all'interno del campo di input in verde quando il valore è maggiore di 50 e in rosso quando è minore o uguale a 50.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      input[type="number"] {
        color: red;
      }

      input[type="number"]:valid {
        color: green;
      }
    </style>
  </head>
  <body>
    <input
      type="number"
      min="1"
      max="100"
      placeholder="Inserisci un numero da 1 a 100" />
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un campo di input di tipo range (slider). Usa il CSS per cambiare il colore del cursore del range in blu quando è selezionato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      input[type="range"]::-webkit-slider-thumb {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <input type="range" />
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un campo di input di tipo data (date picker). Usa il CSS per cambiare il colore del testo all'interno del campo di input in blu quando il campo di input ha il focus.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      input[type="date"]:focus {
        color: blue;
      }
    </style>
  </head>
  <body>
    <input type="date" />
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un campo di input di tipo submit (pulsante di invio). Usa il CSS per cambiare il colore del testo e dello sfondo del pulsante quando il mouse ci passa sopra (utilizza l'hover) e quando il pulsante è stato cliccato (utilizza l'active).

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      input[type="submit"] {
        color: black;
        background-color: white;
        border: 1px solid black;
        padding: 5px;
      }

      input[type="submit"]:hover {
        color: white;
        background-color: blue;
      }

      input[type="submit"]:active {
        color: white;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <input type="submit" value="Clicca qui" />
  </body>
</html>