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

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: absolute from 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>