How do I change image checkboxes frame?

  • armariosbarcelona
    Asked on September 28, 2015 at 5: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.

    Jotform Thread 671593 Screenshot
  • Ben
    Replied on September 28, 2015 at 7: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.

  • armariosbarcelona
    Replied on September 30, 2015 at 6: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.

  • Boris
    Replied 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:

    How do I change image checkboxes frame? Image 1 Screenshot 20

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

  • armariosbarcelona
    Replied on October 1, 2015 at 5:47 AM

    It works perfect!!!

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

    Regards from Barcelona.

  • Boris
    Replied on October 1, 2015 at 8: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