如何从我的 Font Awesome 复选框中删除这个白色背景或边框？

Question

我正在使用 Font Awesome 5 来设计我的复选框我的问题是当我点击我的复选框时有一个白色背景或边框我无法删除或隐藏

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

和要测试的 JSFiddle：https://jsfiddle.net/fyc4bwmr/1/

Answer 1

将 input[type=checkbox]:checked:before 更改为 input[type=checkbox]:checked:after 并从该声明块中删除 position: absolute：

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>

如何从我的 Font Awesome 复选框中删除这个白色背景或边框？

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

html

css

font-awesome

font-awesome-5