CODEWITHSUNDEEP
cssgoogle-chromefirefoxcheckboxfont-awesome
Bonsai
Bonsai

Reputation: 346

Custom checkbox don't work on Firefox

I custom my checkbox with FontAwesome but it's work only on Chrome...

I put this on my page:

<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" />

Here my 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

Thanks,

Upvotes: 3

Views: 4099

Answers (4)

ThomasBrushel
ThomasBrushel

Reputation: 107

You could have just done

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

Upvotes: 1

Bonsai
Bonsai

Reputation: 346

Thanks to Mr Lister and Mokarram Khan, I wanted with css only, I use label and it works !

Here my checkbox code: 

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

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

Upvotes: 1

wander
wander

Reputation: 218

You can use the <i> tag with Font Awesome instead of css property and then describe the behavior that you want in jQuery. For example:

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: if you want to hide the initial checkbox just put this:

CSS:

#checkbox_cd {display:none;}

I hope it helps.

Upvotes: 1

Mokarram Khan
Mokarram Khan

Reputation: 58

In firefox, ::before or ::after wont work on input. You need to work with the label instead of the input.

Lets work with these- 

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

Thanks

Upvotes: 4

Related Questions