form con stile (form.css)

form {
    border: 8px solid black;
    font-family : handwriting,fantasy;
    width:300px;
    padding:20px;
}

button, input, select, textarea {
    font-family : inherit;
    font-size   : 80%;
}

.stiloso {
    text-align: left;
    float:right;
    display: inline-block;
    margin-top:auto;
    border: 2px solid #ccc;
    box-shadow:0 0 25px 6px rgba(0,0,0,0.06);
    padding:5px;
    border-radius:5px;
    transition: .5s background-color;

}

.stiloso:hover {
    border:3px solid #111;
}

.bordorosso {
    border: 2px solid #a00;
    background-color: #ffd969;
    transition: .5s border-color;
}

.bordorosso:focus {
    background-color: #ffd969;
    border-color: #a00;
}

textarea {
    background-color: bisque;
}

select {
    margin-top:10px;
    width: 100%;
    padding:10px;
    border-radius:10px;
}

button {

    appearance:none;
    -webkit-appearance:none;
    padding:10px;
    border:none;
    background-color:#3F51B5;
    color:#fff;
    font-family : handwriting,fantasy;
    font-weight:200;
    border-radius:5px;

}

body {
    margin:30px;
    font-size:18px;
}

/* contenitore */
label {
    position: relative; /* diventa un contenitore*/
    padding-left:30px; /* fare spazio per la checkbox personalizzata */
    cursor: pointer;
}
/* nasconde il checkbox di default  */
label input[type=checkbox]  {
    position: absolute;
    opacity: 0;
    width:0;
    height:0;
}
label input[type=radio]  {
    position: absolute;
    opacity: 0;
    width:0;
    height:0;
}

/* custom checkbox personalizzato */
label span {
    position: absolute;
    /* posizionarsi nello spazio libero della label */
    top:0;
    left:0;
    width:20px;
    height:20px;
    background-color: #ddd;
    transition: .3s background-color; /* slight transition */
}
/* l'icona del check*/
label span:after {
    content: "";
    position: absolute;
    display: none;

    /* icona */
    left: 6px;
    top: 2px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
label:hover span {
    background-color: #ccc;
}

/**** ecco il trucchetto ***/
label input:checked ~ span {
    background-color: #2eaadc;
}
label input:checked ~ span:after {
    display:block;
}