Is it possible to style JSF commandbutton tags to look like the following example:
http://www.bloggerswatch.com/internet/css-trick-submit-button-should-look-same-everywhere/
It works for the commandlink/
+1
A:
Yes, you should be able to do something similar using slightly different CSS that incorporates the images as CSS backgrounds rather than <img> tags:
Markup
<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%;
}
Pat
2010-07-22 21:06:57
Thanks, this almost duplicates the appearance of the example. Is there a way to shift the image right a few pixels so it's not on the left edge? I've tried adding a padding and margin attribute to the .apply style and the image doesn't shift over.
Cal
2010-07-22 21:46:59
Absolutely. You can play with the background position on the .apply and .cross classes. Currently I've got it set as '0 50%' which means left edge, vertically centered. If you changed it to '10px 50%' that would be 10px from the left, vertically centered.
Pat
2010-07-22 22:21:04
A:
Thanks pat, that was it. One more thing, there's a black border that surrounds the button when you click it. Is there a way to prevent that black border when the button is clicked?
Cal
2010-07-23 15:55:15