自定义复选框在 Firefox 上不起作用答案

【问题标题】：Custom checkbox don't work on Firefox自定义复选框在 Firefox 上不起作用
【发布时间】：2016-10-01 22:46:29
【问题描述】：

我使用 FontAwesome 自定义了我的复选框，但它仅适用于 Chrome...

我把这个放在我的页面上：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

<input type="checkbox" id="checkbox_cd" class="custom-checkbox" />

这是我的css：

/*
input.custom-checkbox {
    visibility: hidden;
}
*/
input.custom-checkbox:checked::after, input.custom-checkbox::after {
    visibility: visible;
    font-family: FontAwesome;
    font-size: 60px;
    background-color: transparent;
    display: inline-block;
}

input.custom-checkbox:checked::after {
  content: '\f058';
  color: #16A085;
}

input.custom-checkbox::after {
  content: '\f057';
  color: #C0392B;
  position: relative;
  bottom: 5px;
}

jsfiddle

谢谢，

【问题讨论】：

您不能使用复选框的::after。请改用<label>。
谢谢，可惜 ::after Firefox 不支持它..
不仅仅是火狐。它不适用于符合标准的任何浏览器。它可以在 Chrome 上运行是侥幸！

标签： css google-chrome firefox checkbox font-awesome

【解决方案1】：

在 Firefox 中，::before 或::after 不会对输入起作用。您需要使用标签而不是输入。

让我们来处理这些——

input.custom-checkbox + label::before
input.custom-checkbox:checked + label::after

谢谢

【讨论】：

【解决方案2】：

您可以使用带有 Font Awesome 的 <i> 标签而不是 css 属性，然后在 jQuery 中描述您想要的行为。例如：

HTML：

<input type="checkbox" id="checkbox_cd" class="custom-checkbox" />
<i id="check"  class="fa fa-times fa-2x" aria-hidden="true"></i>

CSS：

i {cursor:pointer;}

jQuery：

$( "#check" ).click(function() {
    if ($("#checkbox_cd").is(':checked')){
        $( "#check" ).removeClass( "fa-check-circle-o");
        $( "#check" ).addClass( "fa-times" );
        $( "#checkbox_cd").prop('checked', false);
    }
    else {
        $( "#check" ).removeClass( "fa-times" );
        $( "#check" ).addClass( "fa-check-circle-o" );
        $( "#checkbox_cd").prop('checked', true);
    }
});

JSFIDDLE

P.S：如果你想隐藏初始复选框，只需输入：

CSS：

#checkbox_cd {display:none;}

希望对你有帮助。

【讨论】：

确实，这是另一种选择！谢谢老兄

【解决方案3】：

感谢 Lister 先生和 Mokarram Khan，我只想要 css，我使用 label 并且它有效！

这是我的复选框代码：

<input type="checkbox" id="checkbox_cd" class="custom-checkbox" />
<label for="checkbox_cd"></label>

还有我的 CSS：

input.custom-checkbox {
    visibility: hidden;
}

input.custom-checkbox:checked + label::after, input.custom-checkbox + label::after {
    display: inline-block;
    position: relative;
    visibility: visible;
    font-family: FontAwesome;
    font-size: 60px;
    background-color: transparent;
}

input.custom-checkbox:checked +label::after {
    content: '\f058';
    color: #16A085;
}

input.custom-checkbox + label::after {
  content: '\f057';
  color: #C0392B;
  position: relative;
  bottom: 5px;
}

【讨论】：

【解决方案4】：

你本来可以做的

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

【讨论】：