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; }