- Blog
- Programmazione
- CSS
- CSS3 - Moduli
CSS3 - Moduli
- Programmazione
- CSS
- Giuseppe Ventura
- 01/10/2023
L'aspetto di un modulo HTML può essere notevolmente migliorato con i CSS:
Applicazione di stili ai campi di input
Utilizza la proprietà width per determinare la larghezza del campo di input:
input {
width: 100%;
}
L'esempio su indicato si applica a tutti gli elementi <input>. Se si desidera definire solo uno stile per un tipo di input specifico, si può utilizzare i selettori di attributo:
input[type=text]- selezionerà solo i campi di testoinput[type=password]- selezionerà solo i campi passwordinput[type=number]- selezionerà solo i campi numerici- etc..
Inputs con padding
Utilizza la proprietà padding per aggiungere spazio all'interno del campo di testo.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Inputs con bordi
Si utilizza la proprietà border per modificare la dimensione e il colore del bordo e si utilizza la proprietà border-radius per aggiungere angoli arrotondati:
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Se si vuole solo un bordo inferiore, si usa la proprietà border-bottom :
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
Inputs colorati
Si utilizza la proprietà background-color per aggiungere un colore di sfondo all'input e la proprietà color per modificare il colore del testo:
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Inputs col focus
Per impostazione predefinita, alcuni browser aggiungeranno un contorno blu attorno all'input quando viene attivato (cliccato). Si può rimuovere questo comportamento aggiungendo outline: none; all'input.
Utilizza il selettore :focus per fare qualcosa con il campo di input quando viene attivato:
input[type=text]:focus {
background-color: lightblue;
}
input[type=text]:focus {
border: 3px solid #555;
}
Input con icona/immagine
Se si vuole un'icona all'interno dell'input, si usa la proprietà background-image e si posiziona con la proprietà background-position. Da notare anche che aggiungiamo un grande padding a sinistra per riservare lo spazio dell'icona:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Input di ricerca animato
In questo esempio utilizziamo la proprietà CSS transition per animare la larghezza dell'input di ricerca quando viene attivato. Imparerai di più sulla proprietà di transizione più tardi, nel nostro capitolo Transizioni CSS.
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Stile delle aree di testo
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Stile dei menù di selezione
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Stile dei pulsanti
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;
}
/* Suggerimento: utilizza width: 100% per i pulsanti a larghezza intera */
Per ulteriori informazioni su come definire lo stile dei pulsanti con i CSS, leggi il nostro Tutorial sui pulsanti CSS.
Moduli responsive
Quando lo schermo è largo meno di 600 px, impila le due colonne una sopra l'altra invece che una accanto all'altra:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>