Customize Radio and Checkbox with CSS [duplicate] - css

Question

This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 7 years ago.
Is it possible to customize the look of radio and checkboxes only using CSS? I see there is a lot out there regarding this, but most solutions require the use of images and javascript.

Answer 1

Looks like the guys at bootswatch.com do a nice job of customizing inputs with pure CSS. I simplified their approach on the fiddle here:
https://jsfiddle.net/mthomas9261/qujbq4gs/
HTML:
<input type="radio" value="a" name="test">
<input type="radio" value="b" name="test">
<input type="checkbox" name="a" value="a">
<input type="checkbox" name="b" value="b">
CSS:
/*****************************************************
****************** Radio *****************
******************************************************/
/* Hide Original Radio Button */
input[type="radio"] {
position: relative;
margin-top: 6px;
margin-right: 4px;
vertical-align: top;
border: none;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
/* Remove standard blue selection outline */
input[type="radio"]:focus {
outline: none;
}
/* New radio button */
input[type="radio"]:before,
input[type="radio"]:after {
content: "";
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
-webkit-transition: 240ms;
-o-transition: 240ms;
transition: 240ms;
}
input[type="radio"]:before {
position: absolute;
left: 1px;
top: -2px;
background-color: red;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
input[type="radio"]:after {
position: relative;
top: -3px;
border: 1px solid #E0E0E0;
}
/* New radio checked */
input[type="radio"]:checked:before {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
input[type="radio"]:checked:after {
border-color: #E0E0E0;
}
/* New radio disabled */
input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after {
border-color: #F1F1F1;
}
input[type="radio"]:disabled:checked:before {
background-color: #F1F1F1;
}
/*****************************************************
**************** Checkbox ****************
******************************************************/
/* Hide Original Checkbox */
input[type="checkbox"] {
position: relative;
border: none;
margin-bottom: -4px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
/* Display New Checkox */
input[type="checkbox"] {
position: relative;
border: none;
margin-bottom: -4px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
outline: none;
}
input[type="checkbox"]:focus:after,
.checkbox input[type="checkbox"]:focus:after,
.checkbox-inline input[type="checkbox"]:focus:after {
border-color: #E0E0E0;
}
input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
content: "";
display: block;
width: 14px;
height: 14px;
margin-top: -2px;
margin-right: 5px;
border: 1px solid #E0E0E0;
border-radius: 1px;
-webkit-transition: 240ms;
-o-transition: 240ms;
transition: 240ms;
}
/* Checkbox Checked */
input[type="checkbox"]:checked:before {
content: "";
position: absolute;
top: -2px;
left: 5px;
display: table;
width: 4px;
height: 9px;
border: 3px solid red;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type="checkbox"]:checked:after {
border-color: #E0E0E0;
}
/* Checkbox Disabled */
input[type="checkbox"]:disabled:after {
border-color: #F1F1F1;
}
input[type="checkbox"]:disabled:checked:after {
background-color: #F1F1F1;
border-color: transparent;
}