How can I change the style of the Other option on a Checkbox?

  • Profile Image
    supremec
    Asked on December 10, 2016 at 03:55 PM
    I'm also looking to change the styling of my 'other' checkbox. Changing the style of them in design mode seems to leave 'other' as the default. I've included a screen grab to explain.
  • Profile Image
    Jim_R
    Answered on December 10, 2016 at 04:33 PM

    Hi again, can you try the following CSS codes:

    #input_3 {

       width: 70%;

       margin: -7px 0 0 -12px !important;

    }

     

    .form-radio-item:not(#foo) .form-radio-other, 

    .form-radio-item:not(#foo) .form-checkbox-other {

       visibility: hidden;

    }

     

    .form-radio-other:before,

    .form-checkbox-other:before {

       content: '';

       position: absolute;

       display: inline-block;

       vertical-align: baseline;

       margin-right: 4px;

       -moz-box-sizing: border-box;

       -webkit-box-sizing: border-box;

       box-sizing: border-box;

       -webkit-border-radius: 10%;

       -moz-border-radius: 10%;

       border-radius: 10%;

       top: 0px;

       left: 4px;

       width: 24px;

       height: 24px;

       cursor: pointer;

       border: 2px solid #888;

       visibility: visible;

    }

     

    .form-checkbox-other:after,

    .form-radio-other:after {

       background-color: #0A98F4;

       -webkit-border-radius: 5%;

       -moz-border-radius: 5%;

       border-radius: 5%;

       cursor: pointer;

       content: '';

       position: absolute;

       z-index: 10;

       display: inline-block;

       top: 5px;

       left: 9px;

       width: 14px;

       height: 14px;

       visibility: visible;

       opacity: 0;

    }

     

    .form-radio-other:checked:after,

    .form-checkbox-other:checked:after {

      opacity: 1;

    }

    Here's how it should look like after appending those CSS codes on that same section mentioned on the other thread:

  • Profile Image
    supremec
    Answered on December 10, 2016 at 05:15 PM

    Thanks for the quick reply! I have injected the code and it works but it isn't quite showing correctly when I test it live on the site in firefox and on Iphone 6 in safari.

    Not sure why this would be. I've double check I injected the code as posted.

  • Profile Image
    Mike_G
    Answered on December 11, 2016 at 01:07 AM

    I'll check the issue and please give me some time to find the solution to it.

    I will be updating you in this thread as soon as possible.

    Thank you.

  • Profile Image
    Mike_G
    Answered on December 11, 2016 at 01:31 PM

    To solve your issue with the iPhone 6 (Safari), please inject the following CSS codes below to your form

    @media (min-width : 304px) and (max-width: 717px){

    #cid_3 .form-single-column{

    width: 350px !important;

    }

    #input_3{

    width: 216px !important;

    }

    }

    However, with regards to the issue of your form with FireFox, I was able to reproduce it, but I'm still not able to find the correct solution. It seems that FireFox is not displaying the pseudo codes added through the CSS codes provided by my colleague above. But since your form is embedded in a website, you might want to consider using the form's Full Source Code, then we can try to make the changes directly to your website's codes/scripts.

  • Profile Image
    supremec
    Answered on December 11, 2016 at 02:33 PM

    Thanks Mike at code worked perfectly!

     

    Thanks for taking the time to reply.