For checkbox color related

[imfarruk]

Please include a clear and concise description of the feature or enhancement you would like to have added to the project.
Hi jake..
your work is great. can you tell me how to change the checkbox color to #f5d792 if i want to change.. is it possible to change.i used accent-color: #f5d792 ..but it'll not affect

[jakezatecky]

The icon colors use the regular color CSS attribute. So, to change all checkbox icon colors, you would do:

.rct-icon-check,
.rct-icon-half-check,
.rct-icon-uncheck {
    color: #f5d792;
}

[imfarruk]

thank you jack for reply.. i used this already but it just change the color .. but i want to change checkbox accent-color like this below image [image: image.png] but i am getting result like this [image: image.png] there is any other way to change checkbox accent-color.. whenever i used pre defined checkbox it work but other icon is vanishing. So please if you have any idea how to implement please let me know . it'll help me alot ..i tried alot but i'm not getting any idea

…

On Fri, 28 Oct 2022 at 03:15, Jake Zatecky ***@***.***> wrote: The icon colors use the regular color CSS attribute. So, to change all checkbox icon colors, you would do: .rct-icon-check, .rct-icon-half-check, .rct-icon-uncheck { color: #f5d792 ; } — Reply to this email directly, view it on GitHub <#385 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALY7RHQI5CI6U7GQJYINY2DWFLZW3ANCNFSM6AAAAAARP2XX7M> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jakezatecky]

Your images did not load. I suspect that is because you replied by email.

However, I see what you mean now. The accent-color property supports a limited subset of HTML elements. Since this component uses custom icons, that property does not apply. However, you do have a couple options.

You could emulate the accent effect by setting a background color to the ::before pseudo-element for those check icons. It is not perfect, as it does spill a little outside of the box, but it is fairly close:

.rct-icon-check::before,
.rct-icon-half-check::before {
  background: #f5d792;
}

Alternatively, you can pass the property nativeCheckboxes={true} to the tree component such that it uses the native HTML checkboxes. In that case, the accent-color property would work:

.rct-node input[type="checkbox"] {
  accent-color: #f5d792;
}

[imfarruk]

Thanks for the help! It is working fine in firefox but not in chrome. In chrome there is no impact on half checkbox. But thank u once again jack for your valuable time and you can add this feature in package.

…

On Sat, 29 Oct, 2022, 2:50 am Jake Zatecky, ***@***.***> wrote: Your images did not load. I suspect that is because you replied by email. However, I see what you mean now. The accent-color property <https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color> supports a limited subset of HTML elements. Since this component uses custom icons, that property does not apply. However, you do have a couple options. You could emulate the accent effect by setting a background color to the ::before pseudo-element for those check icons. It is not perfect, as it does spill a little outside of the box, but it is fairly close: .rct-icon-check::before, .rct-icon-half-check::before { background: #f5d792; } [image: image] <https://user-images.githubusercontent.com/3210703/198734072-ee227b79-f762-4bb3-b3ef-70bac86a2b71.png> Alternatively, you can pass the property nativeCheckboxes={true} to the tree component such that it uses the native HTML checkboxes. In that case, the accent-color property would work: .rct-node input[type="checkbox"] { accent-color: #f5d792; } [image: image] <https://user-images.githubusercontent.com/3210703/198733959-89e58c1a-4fda-4507-aa78-25c183bf68ea.png> — Reply to this email directly, view it on GitHub <#385 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALY7RHQM5YIECGCSF5PCPS3WFQ7SJANCNFSM6AAAAAARP2XX7M> . You are receiving this because you authored the thread.Message ID: ***@***.***>