Add checked state to image in checkbox

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use CSS to style a checked checkbox.

Solution: Use the :checked pseudo-selector to specify styles for a checked input.

This support ticket is created 5 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Custom search, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by ericW-8 5 years, 6 months ago.

Assisted by: Christian Cox.

Author

Posts

May 21, 2019 at 3:41 pm #1246624

ericW-8

Tell us what you are trying to do?
I followed Christian Cox's advice to turn my "text labels" into images. And, they work beautifully in the search. Here's the problem, you can't tell they are "checked". I need a solution to indicate the user has successfully selected the item. This can be with an overlayed check, a highlight of the item, or anything else.

I've searched but can't seem to find a solution that works with the Toolset filter views.
I've set up a "practice search" on the page below.

Is there any documentation that you are following?
https://toolset.com/forums/topic/custom-style-of-checkboxes-in-custom-search/

Is there a similar example that we can see?
https://stackoverflow.com/questions/30663562/use-images-like-checkboxes - or anything similar

What is the link to your site?
hidden link

May 21, 2019 at 4:50 pm #1246690

Christian Cox

Hi, if you use the :checked pseudo selector you can apply different background images or something to indicate a highlight.

div input[type=checkbox][value=water-features]:checked
{
  content: url( path/toyour/highlight/image.png );
}

May 21, 2019 at 6:03 pm #1246697

ericW-8

My issue is resolved now. Thank you!