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>

结果将是下一个 - ＆gt;按钮，在文本'blah'之后，但我需要按钮内的文字。有没有同样的问题？我需要很多相同的butons和commandButtons。也许有些人可以提出有关创建自己的需要参数和样式的jsf元素的原因的建议吗？

THX

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;
}

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

JSF。更改按钮/ commandButtons文本样式

1 个答案: