Image Checkbox Widget: How to add custom CSS code to customize the images?

Hello Jotform!

I am trying to Customize a few things on this widget - could you point me in the right direction please?

Justify/Align the widget to the right of the form

Remove Border-radius

Keep the size at 50px x 50px

I have tried to do all these things but cannot get their div names

https://form.jotform.com/60504200689956

Thank you again Jotform!

I will provide the code for each thing that you want to achieve.

Justify/Align the widget to the right of the form

li {

    margin-left: 100px;

}

You may try using a different value rather than use 100px.

Remove Border-radius

li img{

    border-radius:0px;

}

Keep the size at 50px x 50px

li, li img {

    width: 50px;

    height: 50px;

}

Inject the CSS code by clicking on the widget, then on the wizard icon.

Then click on the CSS tab and paste the code provided above.

Hope this helps.

Thank you so much!

Just one more thing, how do I maintain the 

border-radius:0px; after it is clicked?

Thank you Kevin!

Mark.

You're welcome.

Sure, just add this CSS code:

 li.checked img {

    border-radius: 0px;

}

Do let us know how it goes.

thank you very much!

Do you have an article to show me how you get the names to apply the styles to?

for example - where do you find  li.checked img 

I am trying to customize the check box and cannot figure it out.

If you are using the normal fields, you may follow this guide to get the names and IDs: http://www.jotform.com/help/146-How-to-find-Field-IDs-Names. 

However, it does not work when you are using a widget, because they work with a different method than the normal fields, to know the name or ID of an element, you will need to inspect it using the web console, follow these steps.

1. Right click on the element that you want to know the name/ID and then click on inspect.

2. You will find the ID of the element, if it would be a form field such as a text field, radio button, check boxes, you will find the name as well.

Thank you for that info!

I am still having a problem aligning the image checkbox to the right.

When I add

li {

    margin-left: 900px;

}

as you suggested it disappears. Any suggestions?

Yes, it will disappear because the field is 900px to the left of the original position, so it is going out of the window, try using a different value such as 200px.

Unfortunately it disappears after 250px

how can I justify it to the very right of the form?

float:right; wont work

Inject this CSS code:

#id_4 iframe{

    width:100% !important;

}

It will display the element where is added the widget on the same with than the form, then you will be able to set the margin-left property for the image to a maximum value of 560px.

Thank you again Kevin.

I am still unable to get my head around this. how do I control the checkbox then? ie remove the chech completely In the Inspect Element thie below works:

.radio {

     background: none!important;

    }

I cannot figure how to put this into the widget CSS or the Designer CSS. I moved the form to:

https://form.jotform.com/60538081718963?

.radio {

display: none;

}

.checked .radio, .checked .radio:hover {

display: none;

}

You can inject the above custom CSS codes to your widget to hide the radio button circle, checked/unchecked option.

Thank you so much, I know this thread has dragged on...

Its appreciated.

One again thank you both.

Apologies Welvin, This solution is not working.

I injected the code and nothing changed. I added !important

.radio {

    display: none!important;

}

 .checked .radio, .checked .radio:hover {

    display: none!important;

} 

Still nothing. Do I need to add #text_80?

I mean, you have to inject the codes right into the widget CSS area, not to your form. I just did it for you.

Thank you!

Resolved!