时间戳

首页 > 解决方案 > 如何从我的 Font Awesome 复选框中删除此白色背景或边框？

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

问题描述

我正在使用 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/

标签： htmlcssfont-awesomefont-awesome-5

解决方案

更改并从该声明块input[type=checkbox]:checked:before中删除：input[type=checkbox]:checked:afterposition: 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>

推荐阅读