Styling Orbeon XForms Inputs

If you Google styling of Orbeon XForms inputs, you will find some newsgroup discussions about using xhtml:class and xhtml:style attributes on your xforms:input elements rather than just class and style.

The trouble is that these are only marginally useful. This is because Orbeon applies the style and class to a SPAN that wraps the INPUT element. Many CSS properties can't be applied to SPANs.

Luckily CSS allows you to style child elements of an element. The solution then is to add something like the following to your stylesheet (this example produces narrow input elements):

.narrow input { width:20px }

and then apply xhtml:class="narrow" to the XForms element. This styles all input elements that are children of elements with class "narrow" to have a width of 20px. Problem solved.

Check out the following link: http://osdir.com/ml/web.xforms.ops.user/2006-12/msg00151.html