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 size of the radio button input?

    Asked by stormingrobots on January 25, 2017 at 09:26 AM
    Sorry.. I have tried. I managed to font-size, layout of the input label, and all. But, still could not change the button size.   I wrote my own html with buttons, and am able to change the radio button size at ease and work for both IE and Chrome; which are used by most majority.  Could you show me how to change it on jotform? 
  • Profile Image
    JotForm Support

    Answered by Welvin on January 25, 2017 at 09:35 AM

    As mentioned in the original thread, the radio button used a standard user agent stylesheets so they cannot be changed. A workaround would be to change its style through the Designer.

    Then you can override the size on the selected style by custom CSS codes. Assuming that you'll use the style in the given screenshot, you can inject the following custom CSS codes to override the size:

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

        width: 25px !important;

        height: 26px !important;

    }

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

        width: 15px !important;

        height: 15px !important;

    }

    Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by stormingrobots on January 25, 2017 at 11:02 AM

    Sorry,.. I could not find the option to set the button size from the custom design. 

    Please see:

    https://www.jotform.com//?formID=70208611384148#design

    I have already changed the override as well. But, it does not work.

     

  • Profile Image
    JotForm Support

    Answered by Welvin on January 25, 2017 at 11:38 AM

    You seem to have modified the custom CSS codes I gave you, you're missing the #foo. I've fixed it for you.

  • Profile Image

    Answered by stormingrobots on January 25, 2017 at 12:06 PM

    Thank you very much!  I did not use the #foo as I thought that was just for a particular selector.  I guess you do use #foo as your global button selector? :-)

    Anyhow, I notice this does not apply to the hidden field though.  How do I have that changed too.  The field will show when another field is selected. 

    Under Extended Hours Section: 

    when "Need after hours".. is selected. 

    "Select Days  you need for ..." will show up

  • Profile Image
    JotForm Support

    Answered by Welvin on January 25, 2017 at 12:25 PM

    I think so based on the custom radio button/checkbox styles.

    The given custom CSS codes are for the Radio Button only.

    The Select Days.. field is a checkbox field. You can apply the following:

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

        width: 24px !important;

        height: 24px !important;

    }

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

        background-color: #821515 !important;

        box-shadow: 0 3px 0 0 #821515, 3px 3px 0 0 #821515, 6px 3px 0 0 #821515, 8px 3px 0 0 #821515 !important;

    }

    You need to change the values in box-shadow for the check mark.

  • Profile Image

    Answered by stormingrobots on January 25, 2017 at 01:44 PM

    Wooops!  I thought I set it to radio. I apologize for that.  it works great.