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, 7 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.

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, 7 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!