JSF命令按钮 - 样式

Question

是否可以将JSF命令按钮标记设置为如下所示:

http://www.bloggerswatch.com/internet/css-trick-submit-button-should-look-sa​​me-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%;
}