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.
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.
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
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?
The topic ‘Add css styling to checkbox value’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!