For checkbox color related
imfarruk opened this issue · comments
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
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;
}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;
}