Hi.
I am looking to add styling to a checkbox value. I have a range of checkbox values labeled by colour. Red, Green & Blue.
I would like to add a css coloured square next to each value to give a visual colour box.
So for blue you would see a blue box and then the word Blue next to it.
I thought I may be able to assign a .class to each value and then use ::before to apply the colour box.
Any ideas on how to achieve this would be great.
It would be nice to add styling to the checkbox options to clarify the choices for users but if you strictly need color choices, a color picker with limited palette might work.
https://github.com/TomodomoCo/acf-color-picker-palette
https://wordpress.org/plugins/acf-rgba-color-picker/
Thanks for the reply. I probably haven’t made myself clear. I want to try and make the front end look something like this page if you look at the colour section.
Like this page
Each colour has been displayed as a colour box with an icon in it.
Obviously in the edit post page someone will have selected the word Red or Green, or as you have pointed out they could have used a limited colour palette. But on the front end my output simply says Red or Blue or Green and I would like it to display a graphic box showing the colour as this page does.
Any help would be great
Checkbox labels can include HTML. This HTML can include css or class attributes. See my answer here for an example https://support.advancedcustomfields.com/forums/topic/disabling-click-on-color-picker/#post-60394. With HTML added for the label you could then create custom CSS or JavaScript to create the effect you’re looking for.
Hi thank you
Does this also mean I can wrap the value in a css class too. For instance <div class=”redflower”>Red</div>
and so on for each colour
If so does this effect the ability to filter the values at a later date or even search for a red flower for instance
I don’t know about wrapping the value in html. I have not tried it. If you can you will need to remember that all of the html will also be returned when you get the field for display. I have only done this with labels so that I could add styling so that people could see the color they were selecting.
Hi it seems like you can wrap the value in a class. I just tried it and it works fine for styling.
It does however store the class in the database along with the value. I wonder if there is a way of applying a class to the value without it being stored with the value?
