Change checkbox background color when checked

How will I be able to change the background color of checkbox when checked?


I tried using background-color but it change the color behind the checkbox.



I want it to look like this:



Overriding the default checkbox like this:

Many thanks!!!

Hi Arci Jeirico Malabanan,

Of which application type your are referring for this implementation... Is it a Reactive Or Traditional Web application?


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Arci Jeirico Malabanan,

Of which application type your are referring for this implementation... Is it a Reactive Or Traditional Web application?


Regards,

Benjith Sam

 

 traditional web sir

Solution

Arci Jeirico Malabanan wrote:

 traditional web sir

Try with this CSS definition

.checkbox:checked:before {
     border: #1C4CBD;
     background-color: #1C4CBD;
}


Hope this helps you!


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Arci Jeirico Malabanan wrote:

 traditional web sir

Try with this CSS definition

.checkbox:checked:before {
     border: #1C4CBD;
     background-color: #1C4CBD;
}


Hope this helps you!


Regards,

Benjith Sam

 

 One last question Sir. How will I be able to change the "check" color in checkbox?

Arci Jeirico Malabanan wrote:

Benjith Sam wrote: 

 One last question Sir. How will I be able to change the "check" color in checkbox?

 Try with the below mentioned CSS 

.checkbox:after {
    border: var(--border-size-l) solid yellow;
    border-right: none;
    border-top: none;
}

Replace yellow with the required color value


Edit - Sorry the previously shared CSS statement was not complete, please refer the updated CSS definition.


Hope this helps!


Regards,

Benjith Sam