更改commandButton标签样式

时间:2015-11-18 09:27:19

标签: css primefaces

我有一个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

1 个答案:

答案 0 :(得分: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的组件下。