Question

我使用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

谢谢，

Answer 1

在firefox中，:: before或::之后不会对输入工作。您需要使用标签而不是输入。

让我们使用这些 -

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

由于

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

我希望它有所帮助。

Answer 3

感谢Lister先生和Mokarram Khan，我只想用css，我使用标签，它有效！

这是我的复选框代码：

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

Answer 4

你刚刚完成了

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

自定义复选框不适用于Firefox

4 个答案: