CSS - Checkbox & Radio Buttons
Checkbox und Radio Buttons mit css stylen
input[type=radio] {
position: relative;
border: 3px solid #bd1c35;
border-radius: 2em;
background: none;
cursor: pointer;
line-height: 0;
margin: 0 .6em 0 0;
outline: 0;
padding: 0 !important;
vertical-align: text-top;
height: 2em;
width: 2em;
-webkit-appearance: none;
opacity: .7;
}
input[type=radio]:hover {
opacity: 1;
}
input[type=radio]:checked {
background-color: #bd1c35;
opacity: 1;
}
input[type=radio]:before {
content: '';
position: absolute;
right: 50%;
top: 50%;
width: 4px;
height: 10px;
border: solid #FFF;
border-width: 0 2px 2px 0;
margin: -1px -1px 0 -1px;
transform: rotate(45deg) translate(-50%, -50%);
z-index: 2;
}
input[type=checkbox] {
position: relative;
border: 3px solid #bd1c35;
border-radius: 2px;
background: none;
cursor: pointer;
line-height: 0;
margin: 0 .6em 0 0;
outline: 0;
padding: 0 !important;
vertical-align: text-top;
height: 2em;
width: 2em;
-webkit-appearance: none;
opacity: .7;
}
input[type=checkbox]:hover {
opacity: 1;
}
input[type=checkbox]:checked {
background-color: #bd1c35;
opacity: 1;
}
input[type=checkbox]:before {
content: '';
position: absolute;
right: 50%;
top: 50%;
width: 4px;
height: 10px;
border: solid #FFF;
border-width: 0 2px 2px 0;
margin: -1px -1px 0 -1px;
transform: rotate(45deg) translate(-50%, -50%);
z-index: 2;
}
