AI Search

Classic Search

Search Phrase:

Search Type:

Advanced search options

Search in Forums:

Search in date period:

Sort Search Results by:

AI Assistant

Notifications

Clear all

Question [Solved] How to customize checkbox color?

✦ Summarize Topic

How-to and Troubleshooting

Last Post by nonobio 3 years ago

7 Posts

2 Users

3 Reactions

1,101 Views

RSS

Posts: 13

nonobio

Topic starter

Translate ▼

Apr 03, 2023 2:47 pm

(@nonobio)

Eminent Member

Joined: 5 years ago

[#7252]

Hi,

Is it possible to change the background checkbox color (agreement and cookies):

As you can see, it is blue. I would like to use my color #ffc107

Thanks 🙂

This topic was modified 3 years ago by nonobio

Topic Tags

6 Replies

Posts: 8210

Asti

Support

Translate ▼

Apr 03, 2023 2:55 pm

(@asti)

Illustrious Member

Joined: 8 years ago

Use the CSS code below:

#wpdcom input[type='checkbox'] {
    accent-color: #ffc107;
}

The code above is just a simple solution. Here you can find more tips: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

Posts: 13

nonobio

Topic starter

Translate ▼

Apr 03, 2023 3:58 pm

(@nonobio)

Eminent Member

Joined: 5 years ago

Thanks a lot, it works, the background is yellow, but the arrow is now black:

Do you know how to get it white?

4 Replies

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8210

Apr 03, 2023 4:46 pm

Reply to

nonobio

Translate ▼

@nonobio,

I'll try to provide a solution for you soon.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

nonobio

(@nonobio)

Joined: 5 years ago

Eminent Member

Posts: 13

Apr 03, 2023 6:27 pm

Reply to

Asti

Translate ▼

@asti don't bother too much, it's not very important 🙂

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8210

Apr 04, 2023 12:22 pm

Reply to

nonobio

Translate ▼

@nonobio,

The accent-color CSS property automatically changes the color to white if the selected color is light.

Please watch this video to better understand what I mean: https://www.screencast.com/t/QJg5QarLpb

If you change the color and set it a bit darker it'll automatically change the color to white. This is the simplest solution you can use.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.