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 apply a design to "other" for checkbox and radio?

    Asked by portcityrobotics on March 16, 2016 at 11:06 AM

    When I try to set a custom design to checkboxes, the "other" option doesn't reflect those changes.

    checkbox and how a
  • Profile Image
    JotForm Support

    Answered by Kiran on March 16, 2016 at 12:02 PM

    I'm checking on this issue. Please allow me some time to check on this and get back to you with relevant information. 

    Thank you for your patience. 

  • Profile Image
    JotForm Support

    Answered by Kiran on March 20, 2016 at 03:15 PM

    Sorry for the delay and thank you for being patient. As I work on this issue, it seems that it is quite difficult to style the radio buttons/checkboxes without having labels using only CSS. However, I managed to get it done by using image backgrounds.

    Please inject the following CSS code to your form to have the same design to the other boxes as well.

    input.form-radio-other {

        visibility : hidden;

    }

    input.form-radio-other:after {

        border-color : #008000;

        border-style : solid;

        border-width : 2px;

        position : absolute;

        height : 14px;

        left : 4px;

        top : 2px;

        width : 14px;

        content : '';

        background-color : #fff;

        border-radius : 50%;

        visibility : visible;

    }

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

        background-color : #008000;

    }

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

            background-image : url('https://shots.jotform.com/kiran/screenshots/dot.png');

            background-repeat : no-repeat;

    }

    input.form-checkbox-other {

        visibility : hidden;

    }

    input.form-checkbox-other:after {

        border-color : #008000;

        border-style : solid;

        border-width : 2px;

        position : absolute;

        left : 4px;

        top : 2px;

        content : '';

        background-color : #fff;

        border-radius : 50%;

        visibility : visible;

        width : 14px;

        height : 14px;

    }

    input:checked.form-checkbox-other:before {

        background-color : #008000;

    }

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

            background-image : url('https://shots.jotform.com/kiran/screenshots/tick.png');

            background-repeat : no-repeat;

    }

    Once the code is injected to your form, the selected radio button or checkbox shall be displayed as shown below: 

    Hope this information helps!