Skip to content

Instantly share code, notes, and snippets.

@weirdpattern

weirdpattern/.2019-03-18.fancy-checkbox-and-radio-buttons

Last active September 28, 2022 08:36
Show Gist options
  • Save weirdpattern/9e732f2e015f999b8da06409ddaab5ef to your computer and use it in GitHub Desktop.
Save weirdpattern/9e732f2e015f999b8da06409ddaab5ef to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.2019-03-18.fancy-checkbox-and-radio-buttons
2019-03-18.fancy-checkbox-and-radio-buttons
Raw
cross-browser-element-modifier.css
/**
* handles checked
*/
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
color: inherit;
}
/**
* handles focused
*/
input[type="radio"]:focus + label:before,
input[type="checkbox"]:focus + label:before {
/* others */
outline: 1px dotted #212121;
/* chromium */
outline: 1px solid -webkit-focus-ring-color;
}
/**
* support focused on firefox
*/
@-moz-document url-prefix() {
input[type="radio"]:focus + label:before,
input[type="checkbox"]:focus + label:before {
outline: 1px auto Highlight;
}
}
/**
* handles disabled
*/
input[type="radio"]:disabled + label,
input[type="radio"]:disabled + label:before,
input[type="radio"]:disabled:checked + label:before,
input[type="checkbox"]:disabled + label,
input[type="checkbox"]:disabled + label:before,
input[type="checkbox"]:disabled:checked + label:before {
cursor: default;
}
input[type="radio"]:disabled + label,
input[type="radio"]:disabled:checked + label:before,
input[type="checkbox"]:disabled + label,
input[type="checkbox"]:disabled:checked + label:before {
color: #BBBBBB;
}
Raw
cross-browser-element-override.css
/**
* builds the checkbox and the radio button
*/
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
content: "";
cursor: pointer;
font-weight: 900;
font-family: "Font Awesome 5 Free";
padding: 0.125em;
margin-right: 0.125em;
color: transparent;
border: 1px solid #CCC;
background-color: #FFF;
}
/**
* styles the checkbox
*/
input[type="checkbox"] + label:before {
content: "\f00c";
}
/**
* styles the radio button
*/
input[type="radio"] + label:before {
content: "\f111";
border-radius: 50%;
}
/**
* handles ie 10+
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
input[type="radio"] + label,
input[type="checkbox"] + label {
padding: 3px;
}
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
padding: 0.15em;
}
}
Raw
cross-browser-element.css
/**
* handles the default elements
*/
input[type="radio"],
input[type="checkbox"] {
float: left;
clear: both;
margin: 0;
outline: none;
-webkit-appearance: none;
}
Raw
cross-browser-label.css
/**
* styles the label
*/
input[type="radio"] + label,
input[type="checkbox"] + label {
margin: 0;
padding: 3px 3px 4px 3px;
float: left;
clear: both;
cursor: pointer;
}
Raw
html.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<input id="check" type="checkbox" />
<label for="check">Hi, I'm a checkbox</label>
<br />
<input id="check-disabled" type="checkbox" disabled="true" />
<label for="check">Hi, I'm a disabled checkbox</label>
<br />
<input id="check-disabled-checked" type="checkbox" disabled="true" checked="true" />
<label for="check">Hi, I'm a disabled and checked checkbox</label>
<br />
<input id="radio" type="radio" />
<label for="check">Hi, I'm a radio button</label>
<br />
<input id="radio-disabled" type="radio" disabled="true" />
<label for="check">Hi, I'm a disabled radio button</label>
<br />
<input id="radio-disabled-checked" type="radio" data-text="Hi, I'm a disabled and checked radio button" disabled="true" checked="true" />
<label for="check">Hi, I'm a disabled and checked radio button</label>
</body>
</html>
Raw
modern-browser-element-modifiers.css
/**
* handles checked
*/
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before {
color: inherit;
}
/**
* handles focused
*/
input[type="radio"]:focus:before,
input[type="checkbox"]:focus:before {
/* others */
outline: 1px dotted #212121;
/* chromium */
outline: 1px solid -webkit-focus-ring-color;
}
/**
* handles focused on firefox
*/
@-moz-document url-prefix() {
input[type="radio"]:focus:before,
input[type="checkbox"]:focus:before {
outline: 1px auto Highlight;
}
}
/**
* handles disabled
*/
input[type="radio"]:disabled:after,
input[type="radio"]:disabled:before,
input[type="radio"]:disabled:checked:before,
input[type="checkbox"]:disabled:after,
input[type="checkbox"]:disabled:before,
input[type="checkbox"]:disabled:checked:before {
cursor: default;
}
input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:before,
input[type="checkbox"]:disabled:after,
input[type="checkbox"]:disabled:checked:before {
color: #BBBBBB;
}
Raw
modern-browser-element.css
/**
* handles the default elements
*/
input[type="radio"],
input[type="checkbox"] {
float: left;
clear: both;
margin: 0;
padding: 3px;
outline: none;
-webkit-appearance: none;
}
Raw
modern-browser-override.css
/**
* creates the label using data-text (or any other attribute you want to use)
*/
input[type="radio"]:after,
input[type="checkbox"]:after {
content: attr(data-text);
font-size: initial;
cursor: pointer;
vertical-align: middle;
}
/**
* creates the element (box or radio)
*/
input[type="radio"]:before,
input[type="checkbox"]:before {
content: "";
cursor: pointer;
font-weight: 900;
font-family: "Font Awesome 5 Free";
padding: 0.15em;
margin-right: 0.15em;
color: transparent;
border: 1px solid #CCC;
background-color: #FFF;
}
/**
* styles the radio with a default content (circle)
*/
input[type="radio"]:before {
content: "\f111";
border-radius: 50%;
}
/**
* styles the checkbox with a default content (check)
*/
input[type="checkbox"]:before {
content: "\f00c";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment