What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I change the style of the Other Radio Button?

    Asked by oliverpowell on March 19, 2017 at 11:36 AM

    Hello,

     

    I've styled my radio buttons, but the radio button for "Other" in the same element is not inheriting the new style. How do I change this?

     

    Many thanks

     

     

    Page URL:
    https://form.jotformeu.com/22633060159347

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Jim_R on March 19, 2017 at 01:23 PM

    To style the Other Radio Button, inject the following CSS codes:

    .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 #000;

      left: 4px;

      width: 18px;

      height: 18px;

      cursor: pointer;

      visibility: visible;

      margin-top: -16px;

    }

    .form-radio-other:after {

      content: '';

      position: absolute;

      z-index: 10;

      display: inline-block;

      opacity: 0;

      top: 8px;

      left: 8px;

      width: 10px;

      height: 10px;

      background-color: #000;

      -webkit-border-radius: 50%;

      -moz-border-radius: 50%;

      border-radius: 50%;

      cursor: pointer;

      visibility: visible;

    }

    .form-radio-other:checked:after {

      opacity: 1;

      visibility: visible;

    }

    RESULT:

  • Profile Image

    Answered by oliverpowell on March 19, 2017 at 06:46 PM
    Thanks,
    Do you know if it's possible to remove the icon from the warning messages
    as attached? It's really small and fuzzy, I would rather just remove it.

    ...
  • Profile Image
    JotForm Support

    Answered by Ian on March 19, 2017 at 10:49 PM

    I could not see the attached image as the Attachments in the email response donot become part of the thread.

    To attache image login to forum at jotform.com, navigate to your thread and take following steps : 

    1. Click on Insert/Edit image button

    2. Click on the "Upload" button

     

    3. Click on Choose File and look in your local folders.

    4. Click on Submit

     

    Hope this helps.

  • Profile Image

    Answered by oliverpowell on March 20, 2017 at 05:26 AM

  • Profile Image
    JotForm Support

    Answered by Jim_R on March 20, 2017 at 05:47 AM

    Since this is now a different topic, I moved your last question to a separate thread https://www.jotform.com/answers/1096086

    We'll have it addressed there shortly.