Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fancy CSS styling for Radio Buttons and Checkboxes
/*********************
Fancy CSS Textboxes
**********************/
$light-blue: #609FD5;
input[type="checkbox"] {
position: absolute;
left: -9999px;
visibility: hidden;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
position: relative;
padding-left: 30px !important;
cursor: pointer;
margin-bottom: 0;
user-select: none;
}
input[type="checkbox"] + label + small {
position: relative;
top: -5px;
}
/* checkbox aspect */
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 1px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background: #fff;
border-radius: 2px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* disabled cursor */
input[type="checkbox"] + label.disabled {
cursor: not-allowed;
}
/* disabled checkbox aspect */
input[type="checkbox"] + label.disabled:before {
background-color: #eee;
}
/* checked mark aspect */
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
content: '';
background: image-url("icon-check-white.svg") center center no-repeat $light-blue;
background-size: 50%;
width: 20px;
height: 20px;
position: absolute;
top: 1px;
left: 0;
transition: .28s ease;
border-radius: 2px;
}
/* checked mark aspect changes */
input[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
.fancy-checkbox {
padding: 5px 0;
margin-bottom: 15px;
}
.fancy-checkbox label {
user-select: none;
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
/*********************
Fancy CSS Radios
**********************/
$light-blue: #609FD5;
/* Remove default Radio Buttons */
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
left: -9999px;
visibility: hidden;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
position: relative;
padding-left: 28px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
transition: .28s ease;
-khtml-user-select: none; /* webkit (konqueror) browsers */
user-select: none;
margin-right: 20px;
}
[type="radio"] + label:before,
[type="radio"] + label:after {
background-color: #fff;
content: '';
position: absolute;
left: 0;
top: 3px;
margin: 0px;
width: 20px;
height: 20px;
z-index: 0;
transition: .28s ease;
}
/* Unchecked styles */
[type="radio"]:not(:checked) + label:before {
border-radius: 50%;
border: 1px solid #ccc;
}
[type="radio"]:not(:checked) + label:after {
border-radius: 50%;
border: 1px solid #ccc;
transform: scale(0);
z-index: -1;
}
/* Checked styles */
label.boolean {
font-weight: normal;
}
[type="radio"]:checked + label:before {
border: 1px solid transparent;
border-radius: 50%;
}
[type="radio"]:checked + label:after {
background-color: $light-blue;
border-radius: 50%;
border: 1px solid $light-blue;
transform: scale(1.02);
z-index: 0;
}
/* Radio With gap */
[type="radio"]:checked + label:before {
border-radius: 50%;
border: 1px solid $light-blue;
}
[type="radio"]:checked + label:after {
border-radius: 50%;
border: 1px solid $light-blue;
background-color: $light-blue;
z-index: 0;
transform: scale(.5);
}
/* Disabled Radio With gap */
[type="radio"]:disabled:checked + label:before {
border: 2px solid #ccc;
}
[type="radio"]:disabled:checked + label:after {
border: none;
background-color: #ccc;
}
/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
background-color: transparent;
border-color: #ccc;
}
[type="radio"]:disabled + label {
color: #ccc;
}
[type="radio"]:disabled:not(:checked) + label:before {
border-color: #ccc;
}
[type="radio"]:disabled:checked + label:after {
background-color: #ccc;
border-color: #ccc;
}
/* Rails SimpleForm errors */
div.field_with_errors [type="radio"]:not(:checked) + label:before {
border: 1px solid #d9534f;
background: #fff6f6;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.