JSF命令按钮 - 样式

Question

是否可以将JSF命令按钮标记设置为类似于以下示例：

http://www.bloggerswatch.com/internet/css-trick-submit-button-should-look-same-everywhere/

适用于commandlink /

Answer 1

是的，您应该可以使用稍微不同的CSS来做类似的事情，这些CSS将图像合并为CSS背景而不是<img>标记：

<强>标记

<div class="buttons">
    <h:commandButton value="Button Text" styleClass="apply"/>
    <h:commandButton value="Button Text" styleClass="cross"/>
</div>

<强> CSS

.buttons input {
    margin: 5px;
    padding: 5px 5px 5px 20px; /* 20px makes room for your background image */
    border: 1px solid #aaa;
}

.buttons .apply {
    background: #eee url(path/to/apply.png) no-repeat 0 50%;
} 

.buttons .cross {
    background: #eee url(path/to/cross.png) no-repeat 0 50%;
}