[英]primeng how to inline style checkbox?
How can I use the style
input of p-checkbox
to change the border and background color of a checkbox?如何使用
p-checkbox
的style
输入来改变复选框的边框和背景颜色? I already tried [style]="{'background': '#ff0000'}"
.我已经尝试过
[style]="{'background': '#ff0000'}"
。 But this only applies the style to the div which holds the actual checkbox.但这仅将样式应用于包含实际复选框的 div。 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
.相反,我需要更改具有类
p-checkbox-box
和p-highlight
的 div 的border-color
和background
。 Note: I cant use CSS here because the colors are dynamic and dependant on the content.注意:我不能在这里使用 CSS,因为 colors 是动态的并且依赖于内容。
You can use renderer2 to manipulate DOM elements and then add style:您可以使用 renderer2 来操作 DOM 元素,然后添加样式:
Get all checkboxes using document.getElementsByClassName('p-checkbox-box')
使用
document.getElementsByClassName('p-checkbox-box')
获取所有复选框
Iterate over each element and add the style you want using renderer2.setStyle()
遍历每个元素并使用
renderer2.setStyle()
添加你想要的样式
try this piece of code and add it in ngAfterViewInit()
:尝试这段代码并将其添加到
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.