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

Question

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

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

结果将是下一个 -> 按钮，之后是文本"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;
}

您需要更改大小，边框

大小，边框半径，背景。