Skip to Content (Press Enter)
UserImage.jpg
Arci Jeirico Malabanan
246Views
5Comments
Solved
Change checkbox background color when checked
Question

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!!!

0
0
24 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP
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

See solution in context
1
0
24 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

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

0
0
24 Jul 2020
Copy Link
UserImage.jpg
Arci Jeirico Malabanan

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

0
0
24 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP
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

1
0
24 Jul 2020
Copy Link
UserImage.jpg
Arci Jeirico Malabanan

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?

0
0
24 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

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

0
0
24 Jul 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.