Custom style of checkboxes in Custom Search

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 vor 5 Jahren, 11 Monaten. 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)

Tags: Custom search, Views plugin

Dieses Thema enthält 2 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von toolset-dave vor 5 Jahren, 11 Monaten.

Assistiert von: Christian Cox.

Author

Artikel

März 5, 2019 at 12:58 pm #1210010

toolset-dave

Hello,

I am trying to style checkboxes in Custom Search on page versteckter 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"]

März 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");
}

März 5, 2019 at 7:27 pm #1210228

toolset-dave

Thank you for your help. Works great.