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 do I change image checkboxes frame?

    Asked by armariosbarcelona on September 28, 2015 at 05:04 AM

    Hello,

    I´m working with image checkboxes, and I'm trying to take away the border.

    How can I do to put a transparent border or take it away with CSS code? And How can I make it squared instead of rounded? When I write "li img {border-radius: 0px;}" the images become much bigger.

    Thanks.

    Nuri Ruiz.

    Page URL:
    http://www.jotform.com//?formID=43022654452347

    Screenshot
    checkboxes change image image checkboxes how
  • Profile Image

    Answered by Ben on September 28, 2015 at 07:02 AM

    I took a look at your form http://www.jotformeu.com/form/43022654452347 Nuri and I see that it looks better without the borders.

    This is the code that I used to achieve that:

    #images_button_container li > img {
        border: 0 none;
        border-radius: 0;
    }

    If you happen to experience any issues with the images being larger or something else, do let us know and we will help you with that as well, for me it seems to take the same space, just without any borders.

    You should add the CSS to the widgets custom CSS tab.

  • Profile Image

    Answered by armariosbarcelona on September 30, 2015 at 06:11 AM

    Hi again,

    I tried with the code Ben sayd, but there is the same trouble with the size of images, they become larger.

    Any other idea please?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Boris on September 30, 2015 at 10:57 AM

    It looks like the images lose their default sizing when any custom CSS is applied to the images themselves. We can easily fix this by setting the width and height again through the custom CSS, so that your custom CSS in this widget would become:

    #images_button_container li > img {
        border: 0 none;
        border-radius: 0;
        width: 100px;
        height: 120px;
    }

    After adding that code, your form should display as in the following image:

    Please let us know how it goes with the full code. Thank you.

  • Profile Image

    Answered by armariosbarcelona on October 01, 2015 at 05:47 AM

    It works perfect!!!

    Thanks to all of you Jotform, you're all awesome!!!!!

    Regards from Barcelona.

  • Profile Image
    JotForm Support

    Answered by Boris on October 01, 2015 at 08:41 AM

    Your are most welcome, Nuri, we are happy to help. :)

    If you run into any other issues or need any other assistance with your forms, please open a new support thread about it, and we will do our best to help.

    Kind regards