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

    Size of Radio Button PART 2

    Asked by Tellmemore on September 20, 2013 at 01:16 PM

    RE: http://www.jotform.com/answers/270021-Size-of-Radio-Button

    Here is an example of what I am asking about, which is: increasing the size of the circle--the actual circle that is the radio button.

    Screenshot
    size JotForm www
  • Profile Image
    JotForm Support

    Answered by guilledutra on September 20, 2013 at 02:48 PM

    Hi,

    could you try by replacing this custom css code of your form:

    #input_8_0{

    width: 3px !important;

    }

    for this other one:

    #input_8_0{

    width: 60px !important;

    height: 60px !important;

    }

    Feel free to modify the "60px" values in order to fits your needs,

    Hope it helps

    Please let us know if you need further assistance

    thanks

  • Profile Image

    Answered by Tellmemore on September 20, 2013 at 04:07 PM

    Well, I was already told about this on the "part 1" thread, and it didn't work then and it doesn't work now.

    If you look at my image, what I want to know is very simple -- can I increase the size of the circle?

    If you look at my image above, you will see that the size of the circle (the actual radio button circle) is much bigger than on the actual form.

    If you review my first post, I say that this issue of a tiny radio button circle occurs if/when a user is using a MAC computer w/Firefox.

  • Profile Image
    JotForm Support

    Answered by Tasha on September 20, 2013 at 09:06 PM

    Hi,

    Please take a look at this clone that I made of your form here. If that is what you would like please inject the css below. Please note that the 16px in the CSS can be increased or decreased as needed. 

    #input_8_0 {

    width: 16px !important;

    }

    I hope this helps! Please let us know if this solution is still not working for you.

    Thanks!

  • Profile Image

    Answered by Tellmemore on September 20, 2013 at 09:41 PM

    The size of the circles are the same!  The only thing that changes is the location; in yours, it's moved slightly to the right.

  • Profile Image

    Answered by Tellmemore on September 20, 2013 at 09:43 PM

    P.S. See the circle in my image...it's larger than on my or your form.  That is what I am looking for.

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 20, 2013 at 10:11 PM

    @Tellmemore

    Most known browsers like Chrome and FF doesn't support CSS styles for radio buttons and check box. In order to modify it, we have to use some advanced tricks for that. You can try it with the following codes.

    /* Radio */

    input[type="radio"] {

        border:2px solid skyblue;

        background-color: white;

        border-radius: 20px;

        cursor: pointer;

        display: inline-block;

        height: 25px;

        margin-right: 15px;

        position: relative;

        width: 25px;

        -webkit-appearance: none;

        -moz-appearance: none;

        outline:none;

    }

    input[type="radio"]:after {

        border-radius: 25px;

        content: '';

        display: block;

        height: 11px;

        left: 5px;

        position: relative;

        top: 5px;

        width: 11px;

    }

    input[type="radio"]:checked:after {

        background-color: #444;

    }

    This is a CSS3 code so this is mostly not supported with older browsers like IE.

    By the way, you have to removed the following injected CSS code to your form in order for the above code to work.

    #input_8_0{

    width: 3px !important;

    }

    Thanks!

  • Profile Image

    Answered by Tellmemore on September 21, 2013 at 08:02 PM

    Thank you for the code!  But in Google Chrome, my form has 2 circles.  Why?

    Form 30266955593161

  • Profile Image
    JotForm Support

    Answered by abajan on September 21, 2013 at 09:30 PM

    To my knowledge, unless you're okay with using images, there's no surefire way to have the circle appear bigger in all browsers. If you "google" the term "increase radio button size", you'll see what I mean. However, if we come up with something, we'll be sure to inform you.


    Thanks

  • Profile Image

    Answered by Tellmemore on September 25, 2013 at 02:16 PM

    OK, thanks for the info!