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 make radio buttons invisible

    Asked by markashton on April 21, 2011 at 07:35 AM

     

    Hi,

    This may seem an odd request but I'd like to be able to make radio buttons invisible on a form. One can apply images to the labels and this brings them close to a button function on mobiles.

    I'm lacking a bit of CSS knowledge to inject here:

    .form-radio is the class I believe I have to change (as per firebug)

    I've tried using color, background-color, border CSS style but not working.

    Is it possible?

    If not, I'd like to be able to move the radio button to the top center of the label. Vertically aligning it is easy. Positioning at the top is proving more difficult. Margin-top doesn't seem to work.

    See here: http://form.jotform.com/form/11105318326

     Thanks Mark

     

     

    radio buttons JotForm style label
  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 21, 2011 at 08:03 AM

    Hello Mark!

    To hide your radio button, try this:

    .form-radio {
        display : none;
    }

    To move the radio button above your label, try this:

    .form-radio {
        margin-left20px;
    }
    .form-radio-item label {
        displayblock;
    }

    Send us an update on how these codes work out for you. Thank you for using Jotform. If you have further questions, please let us know.

  • Profile Image

    Answered by markashton on April 21, 2011 at 08:19 AM

    Genius Neil,

    The top one is the solution.

    You're my dude of the day

    Regards Mark

  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 21, 2011 at 08:46 AM

    You're welcome Mark. It has always been a pleasure to be of service to you.

  • Profile Image

    Answered by webminister on December 16, 2011 at 11:09 AM

    Will this css code allow the label to be visible, but the button remain invisible.. Here's what I'm trying to do with Jotform and I'm losing my hair on this one... any suggestions.... Here's my question...

    http://www.jotform.com/answers/63119-How-can-I-place-text-between-to-radio-fields-on-the-same-line

    THANKS

     

     

  • Profile Image

    Answered by YummyGarden on July 17, 2012 at 02:45 PM

    How do I change the color of just the radio button text? They are a bright orange and hard to see on the background colorl. I just want them to be black in color!

  • Profile Image

    Answered by pinoytech on July 17, 2012 at 02:52 PM

    @YummyGarden,

    You can use this custom css and inject it into your form:

    .form-radio-item label {

    color: #000 !important;

    }

    If you need further assistance, feel free to contact us again anytime.

    Thank you!

  • Profile Image

    Answered by YummyGarden on July 17, 2012 at 02:58 PM

    Wow, it instantly changed it! Fast and helpful response from your support team!! Thank you!!

  • Profile Image

    Answered by pinoytech on July 17, 2012 at 03:02 PM

    You are welcome! If you need our assistance again feel free to contact us anytime.

    Have a great day!

  • Profile Image

    Answered by YummyGarden on July 17, 2012 at 03:02 PM

    So what is the correct CCS to use for field text? I can change the Page Title text, but the description text color doesn't change.

    Does that work for the same regarding the check box text? It did not change.

    Thanks in advanced!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 17, 2012 at 03:57 PM

    @YummyGarden

    Your question is a tad unrelated to this thread. In the future, please refrain from posting questions not relevant to the original issue.

    Anyway, I have added the code below to your form in order to change the checkbox and radio label color to black:

    .form-radio-item label, .form-checkbox-item label, .form-grading-label {
    color: #000 !important;
    }

    If you have further questions, kindly open a separate thread for your issue. Thanks!

  • Profile Image

    Answered by YummyGarden on July 17, 2012 at 04:00 PM
    Thank you!
  • Profile Image

    Answered by Ravi  on November 05, 2014 at 09:51 PM

    How to hide only specific lable in a radio button ?