1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by rafass, Mar 13, 2016.

  1. rafass

    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: Mar 13, 2016
    iorG19 likes this.
  2. katsulynx

    katsulynx Well-Known Member

  3. rafass

    rafass Well-Known Member

    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.
     
  4. iorG19

    iorG19 Member

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

    rafass_ss1.png
     
    rafass likes this.
  5. rafass

    rafass Well-Known Member

    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/
     

Share This Page