JSF。更改按钮/命令按钮文本样式

Question

我需要更改 jsf（现在使用 jsf 2.2）按钮文本样式。我在其他论坛中没有找到任何默认样式（例如 .ui-buttons、.ui-buttons-text-only，它不起作用）。 例如，我需要一个大小为（200、200、蓝色）的按钮，在这个矩形的中心新建（20,20，白色）和简单的文本“blah”。如果 试试

<h:button value="Logout" outcome="welcome" styleClass="button">
    <h:outputLabel value="blah" styleClass="some_style">
</h:button>

result 将是 next -> 按钮，之后是文本'blah'，但我需要按钮内的文本。 有没有人有同样的问题？ 我需要很多相同的按钮和命令按钮。也许有些人可以就使用需要的参数和样式创建自己的 jsf 元素的原因提供建议？

谢谢

Answer 1

因为评论区空间小，我把它贴出来作为答案。

要更改背景、字体大小、按钮样式，可以使用以下语法和样式：

html

<h:commandButton value="blah" action="welcome" styleClass="richButton" />

css

.richButton {
    margin:0 5px 0 0;
    padding:5px 10px 5px 10px;
    height:29px;
    font-size:12px;
    color:#262626;
    font-weight:bold;
    border:1px #ccc solid;
    border-radius:5px;
    cursor:pointer;
    font-family:Arial, Helvetica, sans-serif;
    /* IE10 Consumer Preview */
    background: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
    /* Opera */
    background: -o-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
    /* W3C Markup, IE10 Release Preview */
    background: linear-gradient(to bottom, #FFFFFF 0%, #E3E3E3 100%);
}
.richButton:hover:enabled {
    /* IE10 Consumer Preview */
    background: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
    /* Opera */
    background: -o-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CCCCCC));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
    /* W3C Markup, IE10 Release Preview */
    background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
}
.richButton:active:enabled {
    /* IE10 Consumer Preview */
    background: -ms-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
    /* Opera */
    background: -o-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #CCCCCC));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
    /* W3C Markup, IE10 Release Preview */
    background: linear-gradient(to bottom, #F0F0F0 0%, #CCCCCC 100%);
}
.richButton:disabled {
    font-weight: normal;
    color: #888888;
}

您需要更改大小、边框大小、边框半径、背景。