How can I apply a design to "other" for checkbox and radio?

  • Profile Image
    portcityrobotics
    Asked 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.

  • Profile Image
    Kiran
    Answered 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
    Kiran
    Answered 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!