How to style the "other" radio button in my form?

Is there a way to make the third choice under "Transportation" ("Other") also have a matching pink radio button as the two choices above it?

Through the chat window, I was provided with this CSS code, but it had some problems.  "Other" did not show as selected, it changed the alignment of the field - especially in mobile view.  I removed the code to start over.

.form-checkbox-item:not(#foo) .form-checkbox-other, .form-radio-item:not(#foo) .form-radio-other{ display: none !important; } [data-type="control_checkbox"] span:last-child label, [data-type="control_radio"] span:last-child label{ display: block !important; font-size: 0px; } .form-checkbox-item input[class*="other"], .form-radio-item input[class*="other"]{ margin-left: 40px !important; }

Try using this css code.

span.form-radio-item label{
  display:block!important;
 
}
input#other_37.form-radio-other.form-radio{
  display: none!important;
}

I hope this helps.

It almost works. The circle for "Other" becomes pink, but doesn't show as filled in (the selected radio button) when selected.

I checked/test your form and I still see the issue.

Allow me more time to check and figure out a fix. I'll be back shortly.

Just wanted to follow-up to see if there's another suggestion to resolve the formatting question on the "Other" radio button.  Thanks!

You can try adding the following CSS codes below to your form to change the style of the "Other" radio button 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;

}

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

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

  border-radius: 50%;

}

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

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

    border-radius : 0;

}

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

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

  border-width:2px;

}

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

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

margin-bottom: 0;

position: relative;

}

/*-------------custom radio--------------*/

.form-radio-other:before {

  content: '';

  position: absolute;

  display: inline-block;

  vertical-align: baseline;

  margin-right: 4px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  border: 2px solid #f4708c;

  left: 4px;

  width: 18px;

  height: 18px;

  cursor: pointer;

  visibility: visible;

  margin-top: -2px;

}

.form-radio-other:after {

  content: '';

  position: absolute;

  z-index: 10;

  display: inline-block;

  opacity: 0;

  top: 5px;

  left: 9px;

  width: 8px;

  height: 8px;

  background-color: #f4708c;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;

  cursor: pointer;

  visibility: visible;

}

.form-radio-other:checked:after {

  opacity: 1;

  visibility: visible;

}

Here's a clone version of your form where I have applied the changes — https://form.jotform.com/73426184637967

Note: The changes may not show in the form builder page but will be visible when you preview the form.

I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

Thanks, Mike!  That looks like the fix!  Appreciate your help.

On behalf of my colleague, you are welcome!