Brett Bergquist wrote:
> I have a checkbox group and I want to apply some style properties to
> the labels of the checkbox. I see the label being rendered as a
> "label" tag and I see that it has two style classes associated with
> it. What I'd like to know is how to override the styles applied by
> these classes on this checkbox group and not affect others.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe_at_woodstock.dev.java.net
> For additional commands, e-mail: users-help_at_woodstock.dev.java.net
>
You can set the styleClass or style tag attributes of the checkboxGroup
tag. These properties are applied to the outermost HTML element
generated by the checkbox group. In this case, the outermost HTML
element will be a span tag. For example, the resulting HTML might look
like so:
|<span class="myStyle">
<ul>
<li>
<span>
<input type="checkbox" name="name" id="first" />
<label for="first">First Name:</label>
</span>
</li>
<li>
<span>
<input type="checbox" name="name" id="last" />
<label for="first">Last Name:</label>
</span>
</li>
</ul>
</span>|
If you want to apply a style to the input elements of a checkboxGroup,
you might consider writing a selector like so:
| <style type="text/css">
.||myStyle|| input {
clear:left;
float:left;
}
</style>|
Then, add this selector via the checkboxGroup tag like this:
| <webuijsf:checkboxGroup styleClass="||myStyle||"/>|
If you want to override existing selectors, if any, you'll have to write
your CSS a bit differently. I'm no CSS expert, but you need to
understand how the selector is written. (You might have to peek at the
style sheets for this.) For example, in order to override the Tbl_sun4
selector used by table, I wrote a selector like this:
|<style type="text/css">
<!-- Example of how CSS selectors can be overridden. -->
.MyTbl table.Tbl_sun4 td { border:none }
.MyTbl table.Tbl_sun4 th { border:none }
<!-- Example of how to define custom CSS selectors -->
table.Tbl_sun4 tr.rowColor1 td, table.Tbl_sun4 tr.rowColor1 th {
background-color: #880000; }
table.Tbl_sun4 tr.rowColor2 td, table.Tbl_sun4 tr.rowColor2 th {
background-color: #008800; }
</style>|
Dan