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:
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;
You can use the new CSS
accent-color
property to change the background colour of the checkbox:
accent-color - CSS: Cascading Style Sheets | MDN
[
^
]
input[type='checkbox'] {
accent-color
:
red
;
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.
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
>
Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad
spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or
edit the question
and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it.
Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
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!