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

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

您可以将 <i> 标签与 Font Awesome 一起使用，而不是 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 2

在 firefox 中，::before 或 ::after 将无法处理输入。您需要使用标签而不是输入。

让我们使用这些 -

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

谢谢

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 上不起作用

Custom checkbox don't work on Firefox

css

checkbox

firefox

google-chrome

font-awesome