How can I use the style
input of p-checkbox
to change the border and background color of a checkbox? I already tried [style]="{'background': '#ff0000'}"
. But this only applies the style to the div which holds the actual checkbox. So its useless. Instead I need to change the border-color
and background
of the div which has the classes p-checkbox-box
and p-highlight
. Note: I cant use CSS here because the colors are dynamic and dependant on the content.
You can use renderer2 to manipulate DOM elements and then add style:
Get all checkboxes using document.getElementsByClassName('p-checkbox-box')
Iterate over each element and add the style you want using renderer2.setStyle()
try this piece of code and add it in ngAfterViewInit()
:
let chkboxes = document.getElementsByClassName('p-checkbox-box')
for (let index = 0; index < chkboxes.length; index++) {
const element = chkboxes[index];
this._renderer2.setStyle(element,'background-color','#bf2222');
this._renderer2.setStyle(element,'border-color','#bf2222');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.