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 to desing the Other radio button?

    Asked by Tenniszentrum_Arsenal on March 17, 2017 at 03:20 AM

    By choosing "other option" at a radio button field, the design of the button stays standard and doesn't get the design choosen through the advanced designer.

    How to change this, because it is looking quiet ......

     

     

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Nik_C on March 17, 2017 at 06:44 AM

    Please copy and paste the below CSS in you Custom CSS field:

    input.form-radio-other{

        visibility: hidden;

    }

    input.form-radio-other:after {

        height: 13px;

        left: 5px;

        position: absolute;

        top: 7px;

        width: 13px;

        content: '';

      border-color:#6f6f6f;

      border-style:solid;

        border-width:2px;

        list-style: none outside none;

        visibility: visible;

    }

    input:checked.form-radio-other:after {

    background-color:#6f6f6f;;

    }

    And here is how ti will look like:

    Let us know how it worked.

    Thank you!

  • Profile Image

    Answered by Tenniszentrum_Arsenal on March 17, 2017 at 07:37 AM

    Nice solution, thank you!

    To have it perfect I wonder if it would be possible to get the space between the inner square and the border too?

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 17, 2017 at 09:01 AM

    You're welcome.

    Please allow me some time to check that for you.

    I'll get back to you as soon as possible.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 19, 2017 at 02:49 PM

    Thank you very much for your patience.

    I had a hard time to make that Other field's checkbox look the same like the first two. So I changed the first two to match the third one:

    If that is something that could work for you please copy and paste the below CSS code in your Custom CSS Field:

    input.form-radio-other{

        visibility: hidden;

    }

    input.form-radio-other:after {

        height: 14px;

        left: 5px;

        position: absolute;

        top: 7px;

        width: 14px;

        content: '';

        border-color:#6f6f6f;

        border-style:solid;

        border-width:2px;

        list-style: none outside none;

        visibility: visible;

    }

    input:checked.form-radio-other:after {

    background-color:#555555;;

    }

    #label_input_103_0:after {

        height: 14px!important;

        left: 6px!important;

        top: 2px!important;

        width: 14px!important;

    }

    #label_input_103_1:after {

    height: 14px!important;

        left: 6px!important;

        top: 2px!important;

        width: 14px!important;

    }

    Here is my clone of your form: https://form.jotformpro.com/70753161070953 please check it.

    Let us know if that works for you.

    Thank you!