Custom style of checkboxes in Custom Search

Ce fil est résolu. Voici une description du problème et la solution proposée.

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 Il y a 5 années et 11 mois. 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)

Marqué : Custom search, Views plugin

Ce sujet contient 2 réponses, a 2 voix.

Dernière mise à jour par toolset-dave Il y a 5 années et 11 mois.

Assisté par: Christian Cox.

Auteur

Publications

mars 5, 2019 at 12:58 pm #1210010

toolset-dave

Hello,

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

mars 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");
}

mars 5, 2019 at 7:27 pm #1210228

toolset-dave

Thank you for your help. Works great.