Question

在咆哮信息中，总有一个蓝色边框，我想摆脱它。尝试将边框颜色添加到不同的咆哮类但它仍然显示，我想要一个黑色边框，我该怎么办？以下是我的css，谢谢。

.ui-growl{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
border-color: black}


.ui-growl-item{color:black;background-color:gray; border-color: black;}

.ui-growl-item-container {background-color:gray;border-color:black;  }

Answer 1

我不确定为什么它在你的情况下是蓝色的，也许你使用了与默认的Aristo主题不同的主题？

但无论如何，<p:growl>边框可由以下选择器覆盖：

.ui-growl-item-container.ui-state-highlight {
    border-color: pink;
}

另请参阅以下使用Chrome开发者工具集进行检查的屏幕截图：

enter image description here

确保在<h:outputStylesheet>中<h:body>包含的样式表中指定覆盖样式（而不是<h:head>）

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="custom.css" target="head" />
    ...
</h:body>

无论如何它将被重新定位到生成的HTML <head>中，这种方法可以保证在任何PrimeFaces捆绑的样式表之后加载。

自定义咆哮消息边框颜色

1 个答案: