1

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.

bilpor
  • 3,467
  • 6
  • 32
  • 77

3 Answers3

0

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)

rookie
  • 16
  • 3
  • The accent-color changes the color of the border. Not the input itself. – bilpor Nov 12 '21 at 12:49
  • I worry you'll have to go for `apearrance: none` and start styling the whole input, I checked some of my previous projects and never found a way how to change background of input without it. The `accent-color` works only for checked capsule, that's why it changes color of the border. – rookie Nov 12 '21 at 12:52
  • Yes, apperance:none has done it...It;s knocked out other bits but hopefully I can sort it now. – bilpor Nov 12 '21 at 12:53
0

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 "

priyanshu
  • 5
  • 4
0

Just changing CSS won't work

Trying to set the background on input="checkbox" won't work when just given "background:some_color" because it has default values which will always override.

So we should use a label tag and a div tag to wrap the input tag, wherein input checkbox itself is hidden.

HTML

<label class="contain">
 <input type="checkbox"/>
 <div class="fake-input"/>
</label>

CSS

.contain *, .contain *::before, .contain *::after {
    box-sizing: content-box !important;
}

.contain input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.contain {
    display: table;
    position: relative;
    padding-left: 1.8rem;
    cursor: pointer;
    margin-bottom: .5rem;
}

.contain input[type="checkbox"] ~ .fake-input {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    background: rgba(0, 245, 248, 1);
    transition: background 250ms;
    border: 1px solid rgba(184, 194, 204, 1);
    border-radius: 0.125rem;
}

.contain input[type="checkbox"] ~ .fake-input::after {
    content: '';
    position: absolute;
    display: none;
    left: .45rem;
    top: .18rem;
    width: .25rem;
    height: .6rem;
    border: solid rgba(255, 255, 255, 1);
    border-width: 0 2px 2px 0;
    transition: background 250ms;
    transform: rotate(45deg);
}

.contain input:checked ~ .fake-input::after {
    display: block;
}

.contain:hover input ~ .fake-input,
.contain input:focus ~ .fake-input {
    background: rgb(10, 38, 43);
}

.contain input:focus ~ .fake-input {
    box-shadow: 0 0 0 2px rgba(52,144,220,0.5);
}

.b-contain input:checked ~ .b-input {
    background: rgba(0, 130, 243, 1);
    border-color: rgba(0, 130, 243, 1);
}

If still are unsure about this, visit Bun.js. My answer is referred from there.

Poornima T
  • 263
  • 1
  • 2
  • 8