How to desing the Other radio button?

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

     

     

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