Skip to content

Instantly share code, notes, and snippets.

@pom-pom
Last active January 8, 2024 01:52
Show Gist options
  • Save pom-pom/10255961 to your computer and use it in GitHub Desktop.
Save pom-pom/10255961 to your computer and use it in GitHub Desktop.
Font Awesome Radio Buttons and Checkboxes
/*Custom Radio Buttons and Checkboxes using Font Awesome*/
input[type=radio],
input[type='checkbox'] {
display: none;
}
input[type=radio] + label {
display: block;
}
input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right: 8px;
width: 23px;
}
input[type=radio] + label:before {
content: "\f10c"; /* Radio Unchecked */
}
input[type=radio]:checked + label:before {
content: "\f05d"; /* Radio Checked */
}
input[type="checkbox"] + label:before {
content: "\f096"; /* Checkbox Unchecked */
}
input[type="checkbox"]:checked + label:before {
content: "\f046"; /* Checkbox Checked */
}
.radio label,
.checkbox label {
padding-left: 0;
}
/*
HTML Markup should look like this:
<div class="checkbox">
<input type="checkbox" id="myCheckbox" name="myCheckbox" value="myCheckbox">
<label for="myCheckbox">Checkbox Label</label>
</div>
<div class="radio">
<input type="radio" id="myRadio" name="myRadio" value="myRadioOption">
<label for="myRadio">Label</label>
</div>
*/
@robashcom
Copy link

robashcom commented Jan 23, 2017

Seems like you should wrap those input fields with the label element or the click event won't go through... Right?

@robashcom
Copy link

OK so I will reply to my own ignorant comment: The element must have the for="someID" attribute and THAT connects it to the actual input element which you've hidden. So the opposite of the usual best practice, but completely reasonable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment