Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have use case where on checked of checkbox default blue background color should be changed and color of tick mark also. I can make use of custom css but since dealing with checkbox with tree structure, I need to consider indeterminate state also. May be need to write extra logic to achieve that so, instead how can modify in default checkbox alone.

Below code which I tried in this link.But did not help.

Stackblitz Link : https://stackblitz.com/edit/angular-table-tree-example-4prj7a?file=app%2Ftable-basic-example.css

Need help in resolving this.

What I have tried:

code :

<pre lang="CSS">
input[type=checkbox]:checked {
  background-color: #a77e2d !important;
  color: #ffffff !important;
}
input[type='checkbox']:after {
    box-shadow: none !important;
}
Posted
Updated 9-Nov-22 22:01pm

You can use the accent-color property in CSS to change the background color of both the checkbox and radio buttons.

input[type=checkbox] {
  accent-color: red;
}
 
Share this answer
 
Comments
Richard Deeming 10-Nov-22 6:19am    
As already clearly explained in solution 2, posted back in March.

Stick to answering new questions unless you have something new and interesting to add to the discussion.
.form-check {
  position: relative;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

input[type=checkbox]:checked+label::before {
  content: "";
  display: block;
  position: absolute;
  text-align: center;
  height: 20px;
  width: 20px;
  left: 0;
  top: 5px;
  background-color: #FA9E57;
  font-family: "Montserrat";
  border-radius: 2px;
  border: 1px solid rgb(150 150 150 / 30%);
}

input[type=checkbox]:checked+label::after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="register.css">

<div class="form-group my-4">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="privacy">
     <label class="form-check-label ml-3" for="privacy">
      Agree privacy
     </label>
   </div>
</div>
 
Share this answer
 
You can use the new CSS accent-color property to change the background colour of the checkbox:
accent-color - CSS: Cascading Style Sheets | MDN[^]

Eg:
CSS
input[type='checkbox'] {
    accent-color: red;
}
 
Share this answer
 
Comments
shriraksha dk 21-Mar-22 7:25am    
But this changes background color checked. But I want to change checkmark color also.
Richard Deeming 21-Mar-22 7:31am    
Then you'll need to use a custom checkbox element, as Chris explained.
Chris Copeland 22-Mar-22 5:17am    
Wasn't aware of this property, I learned something new today!
Richard Deeming 22-Mar-22 5:23am    
It's definitely new - Chrome added support in August, and Firefox in September. :)
You can't directly change the colours of a natively-rendered checkbox via CSS. If you inspect the HTML in that link you provided for the header checkbox, you'll notice that it's actually a "material checkbox" which is a fancy way of rendering a checkbox with custom styling. It works by actually hiding the native checkbox input and building a new one.

I've put together a Edit fiddle - JSFiddle - Code Playground[^] to quickly show how you can achieve this. You basically need to wrap both the input and text in a <label>, then hide the <input> and have an indicator element to represent the checkbox itself.
 
Share this answer
 
Comments
Richard Deeming 21-Mar-22 7:08am    
Changing the background colour of a checkbox via CSS is a lot simpler in modern browsers. :)
shriraksha dk 21-Mar-22 7:23am    
Yes I used mat-checkbox since was facing some issues jumped to native checkbox.
I saw the fiddle on check it shows blue background/indicator but where that checkmark disappeared?

I actually required background none with checkmark by changing directly the native checkbox.
Chris Copeland 22-Mar-22 5:15am    
As I said, you actually can't style the native checkbox itself, you'd have to create some special HTML code to handle it for you (like I did in my JSFiddle). Please also see this StackOverflow post[^] which pretty much says the same thing. I don't know why CSS styling for a checkbox isn't a thing, but here we are!

You could also use the mat-checkbox on each row and apply styling to that? That does exactly what my code does, which is replace the native checkbox with a pseudo-one!
shriraksha dk 22-Mar-22 5:21am    
mat-checkbox actually works but not sure indeterminate state is not updating even though with proper states.
so I switched to native one

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900