css - p :confirmDialog how to change the image and text color

Question

我需要使用素面显示确认对话框。但我需要有一个自定义图标(黄色三 Angular 形)和红色文本。通过使用以下内容，我得到了一个带有黑色文本的蓝色三 Angular 形，我不确定如何使用我的图标以及设置对话框文本的样式。

    <p:column id="billing_address_unassign"
    headerText="#{billingAccount_msgs['addresses.table.column.unassign']}"
    styleClass="col10">
    <p:commandButton immediate="true" id="address_unassign"
        styleClass="cart-button-class" icon="delete"
        title="#{billingAccount_msgs['unassign.address.tooltip.text']}"
        oncomplete="unassignBillingAddressConfirmationDialog.show()">
        <f:setPropertyActionListener value="#{billingAddress}"
            target="#{billingAddressBean.selectedBillingAddress}" />
    </p:commandButton>
</p:column>
  </p:dataTable>

  <p:confirmDialog appendToBody="true"
id="unassignBillingAddressConfirmationDialog"
styleClass="confirm-dialog"
message="#{billingAccount_msgs['unassignBillingAddress.confirmation']}"
header="#   
    {billingAccount_msgs['unassignBillingAddress.confirmation.dialog.header']}"
   severity="alert" widgetVar="unassignBillingAddressConfirmationDialog">

Answer 1

您必须创建自己的黄色图标，然后在确认对话框中放置您的图标而不是默认图标。只需使用 css 即可将文本更改为红色。

将以下内容添加到您的 CSS 文件中:

/*Red text in confirm dialog*/
.ui-confirm-dialog .ui-dialog-content p { color: red; }

/*Yellow triangle in confirm dialog */
.ui-confirm-dialog .ui-dialog-content p span { background-image: url("#resource['images:yellow-triangle.png']}") no-repeat}