Other option in radio button field doesn't match the style of the other options

Can you please advise how to force "Other" option to conform to same look as all other options in CheckBox widget (field id input345) in form located at https://form.jotform.us/72702186153150?

Thank you.

Denise

We would like to apologize for any inconvenience. I was able to reproduce the issue you are having on a clone version of your form. I noticed that you have changed the field from a "Checkbox" (Multiple Choice Field) to a "Radio Button" (Single Choice Field). The issue, however, can be fixed by injecting custom CSS codes to your form. I will try to work on a solution for your concern and I will get back to you as soon as possible.

Any solution to this issue?

Denise

I'm sorry if I have caused you any delay. Below are the CSS codes needed to style and position the "Other" option of the radio button field in your form.

.form-checkbox-other, .form-radio-other {

    visibility : hidden !important;

}

.form-checkbox-item:not(#foo) input[type="checkbox"], 

.form-radio-item:not(#foo) input[type="radio"] {

    visibility: hidden !important;

}

.form-radio-item:not(#foo) label:after,

.form-radio-item:not(#foo) label:before {

  border-radius: 50% !important;

}

.form-checkbox-item:not(#foo) label:after,

.form-checkbox-item:not(#foo) label:before {

    border-radius : 0 !important;

}

.form-radio-item:not(#foo) label:before,

.form-checkbox-item:not(#foo) label:before  {

  border-width:2px !important;

}

.form-radio-item:not(#foo),

.form-checkbox-item:not(#foo){

  margin-bottom: 0 !important;

  position: relative !important;

}

.form-radio-other:before {

    content: '' !important;

    position: absolute !important;

    display: inline-block !important;

    vertical-align: baseline !important;

    margin-right: 4px !important;

    -moz-box-sizing: border-box !important;

    -webkit-box-sizing: border-box !important;

    box-sizing: border-box !important;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    border: 0.11em solid #555555 !important;

    width: 12px !important;

    height: 12px !important;

    cursor: pointer !important;

    visibility: visible !important;

    top: 5px !important;

}

.form-radio-other:after {

    content: '' !important;

    position: absolute !important;

    z-index: 10 !important;

    display: inline-block !important;

    opacity: 0 !important;

    top: 8px !important;

    left: 3px !important;

    width: 6px !important;

    height: 6px !important;

    background-color: #555555 !important;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    cursor: pointer !important;

    visibility: visible !important;

}

.form-radio-other:checked:after {

  opacity: 1 !important;

  visibility: visible !important;

}

#other_346 {

  min-width: initial !important;

  width: initial !important;

}

How-to-Inject-Custom-CSS-Codes

If you have other questions regarding this, please feel free to contact us again anytime.