Question

我有一个Primefaces commandButton

<p:commandButton value="..." action="..." styleClass="myButton"/>

使用自定义css-class

.mybutton{
     margin-left: 10px;
     margin-bottom: 10px;
     width: 200px;
}

我想覆盖按钮标签类的一些属性，即

.ui-button-text-icon-left .ui-button-text

我应该编写什么才能自定义“mybutton”类的标签而不是我的网络应用中的所有按钮？

我正在使用JSF2.2，PF 5.2

Answer 1

如果您希望规则仅影响具有所有提及的类的按钮，请使用此

.mybutton.ui-button-text-icon-left.ui-button-text {
     margin-left: 10px;
     margin-bottom: 10px;
     width: 200px;
}

<p:commandButton>呈现为<button>，嵌套<span>包含标签。像这样的东西

<button ... class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-priority-primary mybutton" ...>
    <span class="ui-button-text ui-c">My button</span>
</button>

因此，如果您实际上尝试设置标签样式，那么CSS规则应为

.mybutton .ui-button-text {
     margin-left: 10px;
     margin-bottom: 10px;
     width: 200px;
}

这样，它会定位具有类ui-button-text的组件，该组件嵌套在具有类mybutton的组件下。

更改commandButton标签样式

1 个答案: