How to desing the Other radio button?

  • Tenniszentrum_Arsenal
    Asked on March 17, 2017 at 3: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 ......

     

     

    Jotform Thread 1094244 Screenshot
  • Nik_C
    Replied on March 17, 2017 at 6: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:

    How to desing the Other radio button? Image 1 Screenshot 20

    Let us know how it worked.

    Thank you!

  • Tenniszentrum_Arsenal
    Replied on March 17, 2017 at 7: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?

  • Nik_C
    Replied on March 17, 2017 at 9: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!

  • Nik_C
    Replied on March 19, 2017 at 2: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:

    How to desing the Other radio button? Image 1 Screenshot 20

    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!