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

  • Profile Image
    scany
    Asked on December 08, 2017 at 01:05 PM

    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?

  • Profile Image
    scany
    Answered on December 08, 2017 at 01:06 PM

    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; }

  • Profile Image
    Richie_P
    Answered on December 08, 2017 at 01:39 PM

    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.

  • Profile Image
    scany
    Answered on December 08, 2017 at 02:30 PM

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

  • Profile Image
    jonathan
    Answered on December 08, 2017 at 03:45 PM

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

    1512765662zzz 2017-12-09 04.39.42.png


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

  • Profile Image
    scany
    Answered on December 09, 2017 at 02:19 PM

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

  • Profile Image
    Mike_G
    Answered on December 09, 2017 at 04:59 PM

    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.

  • Profile Image
    scany
    Answered on December 09, 2017 at 06:39 PM

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

  • Profile Image
    BDAVID
    Answered on December 09, 2017 at 09:52 PM

    On behalf of my colleague, you are welcome!