I have an <input type="checkbox" />

I've managed to set things like the border color, but I seem not to be able to set the background-color. It just stays white.

Can anybody offer a solution, I've been looking on this site and others for an answer, but none that I've found work. This is an internal app that will be using the Edge Browser.

CodePudding user response：

It might be overriden by your browser's default settings. Have you tried adding !important to the background-color option?

If that doesn't help, appearance: none; might help, but it removes completely default styles for your input, so you will have to style all the stuff like :checked mark etc.

E: If you just want to change the background color after checking the input, you can use accent-color (https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color)

CodePudding user response：

i am not sure this will work or not but you can give a class name to input and try using :before and :after sudo selectors like

" .yourclassname:checked:after , .yourclassname:checked:before "