What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

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

    Asked by supremec 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
    JotForm Support

    Answered by Jim_R 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-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-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-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

    Answered by supremec 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
    JotForm Support

    Answered by Mike_G 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
    JotForm Support

    Answered by Mike_G 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;



    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

    Answered by supremec on December 11, 2016 at 02:33 PM

    Thanks Mike at code worked perfectly!


    Thanks for taking the time to reply.