I am using Font Awesome 5 to style my checkbox my problem is when I click on my checkbox there is a white background or border that I can't remove or hide
/* Update default snippet color to better see the problem */
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>and the JSFiddle to test: https://jsfiddle.net/fyc4bwmr/1/