JSF 命令按钮 - 样式答案

【问题标题】：JSF commandbutton - stylingJSF 命令按钮 - 样式
【发布时间】：2010-07-22 20:54:51
【问题描述】：

是否可以将 JSF 命令按钮标签的样式设置为如下示例：

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

它适用于命令链接/

【问题讨论】：

标签： jsf

【解决方案1】：

是的，您应该能够使用稍微不同的 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%;
}

【讨论】：

谢谢，这几乎复制了示例的外观。有没有办法将图像向右移动几个像素，使其不在左边缘？我尝试向 .apply 样式添加填充和边距属性，但图像不会移动。
当然。您可以在 .apply 和 .cross 类上使用背景位置。目前我将它设置为“0 50%”，这意味着左边缘，垂直居中。如果您将其更改为“10px 50%”，则距离左侧 10px，垂直居中。
有没有办法在鼠标悬停期间关闭按钮背景更改？此应用切换到没有图像的渐变背景。