CODEWITHSUNDEEP
cssinputcheckboxbackground-color
PedroEstevesAntunes
PedroEstevesAntunes

Reputation: 91

Change check box background color

Good afternoon.

I'm having a problem changing the background color of the checkboxes that are selected.

CheckBox to change

I've seen options on the internet and some questions right here in the stack. But none of them were successful. Below is the DOM image where the elements are inserted.

Dom about element

The last code I tested was this and it still didn't work

input[type=checkbox]:checked:after{
    background-color: red !important;
    color: blue !important;
}

Aimed to have a background in this color # FFEA00 when checked and the arrow to be # 000 when checked.

Best regards and thanks for the help

Upvotes: 1

Views: 1498

Answers (1)

avia
avia

Reputation: 1568

Yellow background when checked, black arrow when checked. It's here:

.checkbox-label {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 2px solid #000;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #FFEA00;
    border-radius: 5px;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 2px solid #000;
}

.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}
<div class="checkbox-container">
        <label class="checkbox-label">
            <input type="checkbox">
            <span class="checkbox-custom"></span>
        </label>
</div>

Upvotes: 1

Related Questions