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 to adjust radio button sizes?

    Asked by drakeladue on November 18, 2013 at 01:38 PM

    Please provide me with the radio button css so we can modify the size of the radio buttons and check boxes please.

     

    thank you

     

    Drake

    Page URL:
    http://www.woweyebrows.com/other-locations.html

    radio button css radio buttons size checkboxes
  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 18, 2013 at 02:27 PM

    Hello Drake, thanks for posting your inquiry here on the forum.

    You may inject this Custom CSS on your forms. Please read more on How to Inject Custom CSS Codes in JotForm.

    For Radio Buttons

    .form-radio{
    width:50px !important;
    height:50px!important;
    }

    For Checkboxes
    .form-checkbox{
    width:50px !important;
    height:50px!important;
    }

    Please adjust the values in widths and heights to your specifications. If you need further assistance, please do not hesitate to post your inquiries here on the forum or kindly open up a new thread for another topic. Thank you

  • Profile Image

    Answered by drakeladue on November 22, 2013 at 01:14 PM
    Hello: hope all is well. I inserted the code and it worked great at first then it stopped, any idea why?
    heres the link http://www.woweyebrows.com/sample-new-form.html site and form http://form.jotformpro.com/form/33235643693963
    Drake LaDueCEO/Owner
    919-257-3977drake@brand-x-mobile.com
    ---- On Mon, 18 Nov 2013 14:27:55 -0500 JotForm Support Forum <jotform@jotmails.com> wrote ----
    A new response has been received:

    Answered by ardy0689

    Hello Drake, thanks for posting your inquiry here on the forum.
    You may inject this Custom CSS on your forms. Please read more on How to Inject Custom CSS Codes in JotForm.
    For Radio Buttons
    .form-radio{
    width:50px !important;
    height:50px!important;
    }
    For Checkboxes
    .form-checkbox{
    width:50px !important;
    height:50px!important;
    }
    Please adjust the values in widths and heights to your specifications. If you need further assistance, please do not hesitate to post your inquiries here on the forum or kindly open up a new thread for another topic. Thank you



    View this thread on JotForm Support Forum Unsubscribe



  • Profile Image
    JotForm Support

    Answered by KadeJM on November 22, 2013 at 03:21 PM

    I see you mentioned the size of the Radio Buttons and Checkboxes? Did you mean the Size of the Button itself? Or were you perhaps referring to Spacing them out size-wise? Can you please clarify?

  • Profile Image

    Answered by drakeladue on November 22, 2013 at 03:52 PM
    Size of the buttons them self We have the css and it was working right now it's stopped working and is reverting back to its original 12 px even if we put in 100
    Drake LaDueCEO/Owner
    919-257-3977drake@brand-x-mobile.com
    ---- On Fri, 22 Nov 2013 15:21:13 -0500 JotForm Support Forum<jotform@jotmails.com> wrote ----
    A new response has been received:

    Answered by KadeJM

    I see you mentioned the size of the Radio Buttons and Checkboxes? Did you mean the Size of the Button itself? Or were you perhaps referring to Spacing them out size-wise? Can you please clarify?



    View this thread on JotForm Support Forum Unsubscribe



  • Profile Image
    JotForm Support

    Answered by Mike_T on November 22, 2013 at 04:47 PM

    It depends on the browser you use to access the form.

    Unfortunately, most browsers ignore custom width and height parameters on check boxes and radio buttons, they use standard user agent stylesheets instead.

    As far as I know, there is no any easy CSS solution to style these elements. You can check the following articles to get the idea of possible hacks (workarounds):

    How to change the size of the radio button using CSS?

    UI Design: Customize Checkboxes And Radio Buttons With CSS3

    Thank you.

  • Profile Image

    Answered by drakeladue on November 22, 2013 at 08:37 PM

    You guys rock sometimes you just gotta say "I shloudve had a V8*,  Went to firefox and WaLa!

    Thank you for your help!

  • Profile Image

    Answered by Cesar on November 23, 2013 at 12:37 PM

    On behalf of my colleagues, thank you for your input. If you do need further support, do let us know. Thank you. 

  • Profile Image

    Answered by eraclioramirez on August 23, 2014 at 06:27 PM

    It's better not to use styles for such elements as checkoxes, radio buttons, select lists. They always look different in browsers. It's better to use CSS3 features such as checked pseudo-element to style label tag which will perform functions of radio button, like here for checkboxes: styling checkbox as toggle button using only CSS3, the same can be done for radio buttons. Styles which will be applied to label tag, will work the same way in all browsers. If you don't believe, try to open the example above in different browsers.