Edit CSS for Image Checkboxes Widget

  • Profile Image
    Asked on June 17, 2014 at 03:21 AM

    hello all and sorry for my english. 

    I have a question. 

    I would like to change the appearance of the individual boxes of the image widget checkboxes to make them appear the same as the image picker widget. 

    I wonder, is it possible to act through css? 

    and if you like I can do '. 

    my problem is that the appearance of the widget image checkboxes just do not like and I have to use it mandatory because with the image picker widget you can not use the conditional fields. 

    In other words, I would make the same image checkboxes aesthetically image picker without losing the characteristic of the conditional fields. 


  • Profile Image
    Answered on June 17, 2014 at 09:58 AM

    Unfortunately it is not possible to add css to widgets.  

    From my tests it is possible to use conditions with Image Picker widget. You can test the form by selecting one the images that will show other field:


    Is there a specific condition you are trying to implement?

    If you need further support please let us know.

  • Profile Image
    Answered on June 18, 2014 at 02:04 AM

    this is great. 

    but I do not know how to operate the conditions in my form. 

    I tried but does not work with image picker. 

    Can you explain how I should do please?. 


  • Profile Image
    Answered on June 18, 2014 at 03:31 AM


    It is possible to inject custom CSS codes on Image Checkboxes Widget. It is available on its settings.


    Paste the CSS codes from the link below on the image checkbox widget inject CSS box to mimic the layout of the image picker widget.


    Hope this helps!

  • Profile Image
    Answered on June 18, 2014 at 04:24 AM

    thanks, this is perfect for me.
    Thank you very much.
    now I ask one last help, I would like to put all the images in the same row, I would like to reduce the space between image and the other just like the image picker widget, thank you.

  • Profile Image
    Answered on June 18, 2014 at 06:00 AM


    Add the following on the widget CSS  box to make images closer to each other.

    li {

    padding:0 !important;

    margin: 10px 2px !important;


    Then you must also expand your widget width so the images aligns on the same line.

    Here's how:


  • Profile Image
    Answered on June 20, 2014 at 02:10 AM

    this is perfect, thank you. 

    I have noticed a problem, I Crato conditions and I natato that if you choose an option and it goes on but then you go back, even if the conditions remain should disappear. 

    Why this?

  • Profile Image
    Answered on June 20, 2014 at 10:41 AM

    Your last post contains an unrelated question. I have opened a new thread for it, please follow up there


  • Profile Image
    Answered on June 20, 2014 at 10:56 AM

    The first 2 images show correctly my condition.

    this condition displays everything correctly if I click for the first time

    this condition is correct because the first time I clicked on the option.

    but if I clicked on these options and then I'll want to go back, then the condition is as thought they were stored in memory.
    But this is not correct.
    When I click on the iPhone, after clicking on the iPad, the option wi and wi + cellular should disappear and instead remains.
    Please see it live on my site.





  • Profile Image
    Answered on June 20, 2014 at 01:01 PM

    Hello vito1202,

    Please create a new thread for every unrelated question you may have. I have moved your last question to a new thread and it will be answered in the following thread:  http://www.jotform.com/answers/394237

    Thank you!