Пользовательские флажок не работает на 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

В firefox, :: before or :: after wont work on input. Вам нужно работать с меткой вместо ввода.

Позволяет работать с these-

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

Благодарности

Answer 2

Вы можете использовать тег <i> с шрифтом 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 3

Благодаря г-Lister и Mokarram Хан, я хотел только с 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; 
}