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