Custom style of checkboxes in Custom Search

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

Problem: I would like to apply styles to each checkbox individually.

Solution: Use the "value" attribute selector to target each checkbox individually with custom CSS.

 
div input[type=checkbox][value=123] {
  content: url("a-icon.png");
}
 
div input[type=checkbox][value=234] {
  content: url("b-icon.png");
}
 
div input[type=checkbox][value=345] {
  content: url("c-icon.png");
}

This support ticket is created 5 years, 9 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 toolset-dave 5 years, 9 months ago.

Assisted by: Christian Cox.

Author

Posts

March 5, 2019 at 12:58 pm #1210010

toolset-dave

Hello,

I am trying to style checkboxes in Custom Search on page hidden link. I have added image before them using this code:

div input[type=checkbox] + label:before {
  content: url("search.png");
  border: none;
  display: inline-block;
  margin-right: 0.3em;
}

It will add image before each checkbox, but I need to place different images to each of checkboxes.

[wpv-control-postmeta field="wpcf-forma-zhodnoceni" type="checkboxes" url_param="wpv-wpcf-forma-zhodnoceni" output="legacy"]

March 5, 2019 at 6:03 pm #1210182

Christian Cox

There's nothing built-in to Toolset that will allow you to apply arbitrary classes to each checkbox. You would have to use CSS to target the value of each checkbox somehow, and use that value to display a different image or a different area of a sprite.

div input[type=checkbox] + label:before {
  content: url("search.png");
  border: none;
  display: inline-block;
  margin-right: 0.3em;
}

div input[type=checkbox][value=123] {
  content: url("a-icon.png");
}

div input[type=checkbox][value=234] {
  content: url("b-icon.png");
}

div input[type=checkbox][value=345] {
  content: url("c-icon.png");
}

March 5, 2019 at 7:27 pm #1210228

toolset-dave

Thank you for your help. Works great.