XF 1.5 Checkboxes and radio buttons with FA icons [Problem with Firefox]

[rafass]

Ok, I'm using this code to replace the checkboxes and radio buttons with FA:

Spoiler: Checkboxes & radio buttons with FA, EXTRA.css code

/*** custom checkboxes & radios ***
==============================================================*/
input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    margin-right: 8px;
    outline: none;
    cursor: pointer;
}
label>input[type=checkbox]:before {
    position:absolute;
    color: #ccc;
    font-family: FontAwesome;
    content:"\f0c8 ";
    font-size: 22px;
    line-height: 50%;
}
label>input[type=checkbox]:checked:before {
    position: absolute;
    color: #079600;
    font-family: FontAwesome;
    content: "\f14a ";
    font-size: 22px;
    line-height: 50%;
    vertical-align: 3px;
    background: #fff;
    letter-spacing: -1px;

}
/***Checkbox disabled***/
input[type=checkbox][disabled]:before{
    position: absolute;
    color: #d3d3d3!important;
    font-family: FontAwesome;
    content: "\f0c8 ";
    font-size: 22px;
    line-height: 50%;
    vertical-align: 3px;
    background: #fff;
    letter-spacing: -1px;
}
input[type=checkbox][disabled]:checked:before{
    position: absolute;
    color: #d3d3d3!important;
    font-family: FontAwesome;
    content: "\f14a";
    font-size: 22px;
    line-height: 50%;
    vertical-align: 3px;
    background: #fff;
    letter-spacing: -1px;
}

/***Radios***
=================================*/
input[type=radio] {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     margin-left: -1px;
     padding: 0;
     vertical-align: 11px;   
     margin-right: 3px;   
     outline: none;
     cursor: pointer;
}
label>input[type=radio]:before {
    margin-left: -4px;
    position:absolute;
    color: #ccc;
    font-family: FontAwesome;
    content: "\f111";
    font-size: 22px;
    line-height: 50%;
}
label>input[type=radio]:checked:before {
    position: absolute;
    color: #007ed3;
    font-family: FontAwesome;
    content: "\f058";
    font-size: 22px;
    line-height: 50%;
    background: #fff;
    letter-spacing: -1px;
}

Using your inspector tool, you can test on this page: https://xenforo.com/community/account/personal-details
And this is the result in Chrome and Safari:

nice huh?
however, it doesn't work in Firefox:

I've already tried with "::before ::after" but doesn't work. any idea?
Suggestions to improve that code are very welcome too. thanks.

 

[Lukas W.]

That's normal Firefox behaviour. The devs don't bother about fixing it...

 

[rafass]

Dang Thanks for the info katsulynx.
Let's see if there are some way to, at least have a decent result on Firefox. I'll take a look later again.

 

[GeorgioGalben]

it works preety fine I'm on Chrome browser and W10 Thank @rafass

 

[rafass]

Well, this is the code I'm using on my board now:

Spoiler: Checkboxes, radio buttons, Poll, etc.. with FA icons OK!

/*** custom checkboxes & radios ***
=============================================================================*/
input[type=checkbox] {
     border: 0;
     clip: rect(0 0 0 0);
     padding: 0;  
     margin-right: 9px;
     outline: none;
     cursor: pointer;
}
label>input[type=checkbox]:before {
    color: #ccc;
    font-family: FontAwesome;
    content:"\e912";
    font-size: 25px;
    line-height: 50%;
}
label>input[type=checkbox]:checked:before {
    position: inherit;
    display: inline-block;
    color: #079600;
    font-family: FontAwesome;
    content: "\e911";
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    line-height: 13px;
    vertical-align: 2px;
    margin-top: -1px;
}
/***Checkbox disabled***/
input[type=checkbox][disabled]:before{
    color: #e6e6e6!important;
    cursor: not-allowed;  
    font-family: FontAwesome;
    content: "\e912";
    font-size: 25px;
    line-height: 50%;
    vertical-align: 3px;
    border-radius: 50%;
}
input[type=checkbox][disabled]:checked:before{
    color: #EAEAEA!important;
    background: #B3B3B3;
    cursor: not-allowed;
    font-family: FontAwesome;
    content: "\e911";
    font-size: 25px;
    line-height: 52%;
    vertical-align: 3px;
    margin-top: 0;
}

/***Radios***
=================================*/
input[type=radio] {
     border: 0;
     clip: rect(0 0 0 0);
     margin: -1px;
     overflow: hidden;
     padding: 0;
     margin-right: 4px;    
     outline: none;
     cursor: pointer;
}
label>input[type=radio]:before {
    position:absolute;
    margin-left: -5px;  
    color: #ccc;
    font-family: FontAwesome;
    content: "\f111";
    font-size: 25px;
    line-height: 50%;
}
label>input[type=radio]:checked:before {
    position: absolute;
    color: #007ed3;
    font-family: FontAwesome;
    background-size: 10px;
    content: "\f058";
    font-size: 25px;
    line-height: 50%;
    border-radius: 50%;
    background: #fff;
}
/*Poll*/
input#ctrl_max_votes_type_value {
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    margin-right: 4px;
    outline: none;
    cursor: pointer;
}
input#ctrl_max_votes_type_value:before {
    position: absolute;
    margin-left: -5px;
    color: #ccc;
    font-family: FontAwesome;
    content: "\f111";
    font-size: 25px;
    line-height: 50%;
}
input#ctrl_max_votes_type_value:checked:before {
    position: absolute;
    margin-left: -5px;
    color: #007ed3;
    font-family: FontAwesome;
    content: "\f058";
    font-size: 25px;
    font-size: 25px;
    border-radius: 50%;
    background: #fff;
}

Working perfectly in all the browsers, except in Firefox. however, the checkboxes / radio buttons there works fine with the default style. (without icons) without any issue.

I'm using my own kit of icons, so, if you're using the default kit of FA or your own kit, you'll need to customize the CSS code content (content: "\fxxx") with your own codes and the other parameters to suit your needs.
The code on the first post contain the default css codes of the official FA kit. http://fontawesome.io/icons/