How can I remove this white background or border from my Font Awesome checkbox?

Question

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/

Answer 1

Change input[type=checkbox]:checked:before to input[type=checkbox]:checked:after and remove position: absolutefrom that declaration block:

input[type=checkbox]:checked:after{
    content: "\f14a";
    color: #445867;
}

Fiddle:

/* NEW CSS */

input[type=checkbox]:checked:after {
  content: "\f14a";
  color: #445867;
}


/* 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;
}


/* Remove */


/* 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>