Custom style of checkboxes in Custom Search

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 hace 5 años, 11 meses. 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)

Etiquetado: Custom search, Views plugin

Este tema contiene 2 respuestas, tiene 2 mensajes.

Última actualización por toolset-dave hace 5 años, 11 meses.

Asistido por: Christian Cox.

Autor

Mensajes

marzo 5, 2019 at 12:58 pm #1210010

toolset-dave

Hello,

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

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

marzo 5, 2019 at 7:27 pm #1210228

toolset-dave

Thank you for your help. Works great.