Image Picker: Change selections to a "Check Mark" instead of a border

Hi,

Trying to see if it's possible when an image is selected to have it be "checked" instead of a border around the image.

Hi there,

Thanks for reaching out to us!

The default selection animation for the Image Picker widget is drawing a border around the item. You can change this using CSS though.

Related guide: How-to-inject-css-codes-to-widgets

Please let us know what exactly you wish it to look like and we shall present the respective CSS code.

I hope I have been of any help.

Hi Amin,

I would like it to be "checked" when an image is selected. Just a gray/black check mark on the image instead of the border.

Upon testing, it looks like it isn't possible for the image selected to be checked at the moment.

Let me escalate this to our developers as a Feature Request. Though we cannot give you an ETA, rest assured you'll be apprised here of any news.

Meantime, you use the following code to adjust the border (when selected) to your liking.

.divimg.selected {

 border: 2px solid blue;

}

Guide: How-to-inject-css-codes-to-widgets/

Following up on this request. Was there any update on if I am able to have selections "checked"?

Hi there, 👋

Thanks for reaching out to us.

Unfortunately - there's no update regarding this feature request.

However, we will update you once we receive something from our Devs.

Now we sent a follow-up message regarding this.

Thanks,

Alex

Hi there,

We have added a drop-down list to select the style of check type.

If you need to change the checkmark's color here is an example.

Please check if it works for you and write to us.

Regards,

Widgets Team

Thanks Hayk!

So I went and changed the "check type" to checkmark but it is still as border once I select an image. Below is the link to my JotForm if you're able to assist. Thanks.

https://www.jotform.com/build/212345914070146

When I am viewing the form from my phone it does show the checkmark, just when I am viewing from my desktop preview it doesn't. Appears to be working!

For the checkmark, is it possible to have it as an overlay over the image when it is selected? I feel it is too small in the top left corner. Is there a CSS that would have it go over the photo once selected?

Hi again,

Kindly inject the following CSS code into the widget:

.divimg.check_mark:before {

    width: 59px !important;

    height: 156px !important;

    border: solid red !important;

    border-width: 0px 11.5px 11.5px 0 !important;

    border-color: red !important;

    margin: 19px 7px !important;

    margin-left: 121px !important;

z-index: 100008 !important;

}

Result:

Related guide: How-to-inject-css-codes-to-widgets

Should you have any further inquiries, we will be more than happy to help.