One issue I'm encountering with Font Awesome 5 is that, when I click on my checkbox, there is an unwanted white background or border that I can't seem to get rid of.
/* Updating default snippet color for better visibility of the issue */
body {
background-color: black;
color: white;
}
input[type=checkbox], input[type=radio] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 16px;
line-height: 14px;
}
input[type=checkbox]:after, input[type=radio]:after {
content: "\f0c8";
color: #ffffff;
display: block;
border-radius: 0px;
}
input[type=checkbox]:checked:before {
position: absolute;
content: "\f14a";
color: #445867;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/all.css" rel="stylesheet"/>
<div id='test'>
<input type="checkbox" name="cbx">
<label for="cbx">my checkbox</label>
</div>If you want to test it out on JSFiddle, here's the link: https://jsfiddle.net/fyc4bwmr/1/