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

提琴：

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

如何从“真棒字体”复选框中删除此白色背景或边框？

1 个答案: