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

rafass

Well-known member
Ok, I'm using this code to replace the checkboxes and radio buttons with FA:
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:
chrome.gif
nice huh?
however, it doesn't work in Firefox:
firefox.gif
I've already tried with "::before ::after" but doesn't work. any idea?
Suggestions to improve that code are very welcome too. thanks.
 
Last edited:
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.
 
Well, this is the code I'm using on my board now:
Code:
/*** 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/
 
Top Bottom