Markup Structure

Getting familiar with the inputEx markup structure will help a lot if you want to change CSS.

	div.inputEx-fieldWrapper	(+ state CSS classes)
			
			// Label floating left
			div.inputEx-label
					label
					
			// Field floating left
			div.inputEx-Field
			
					// field wrapper
					div.inputEx-AnyField
					
					// Description
					div.inputEx-description
						
			// Messages floating left
			div.inputEx-message
			
			// clear left floating
			div.breaker

The “fieldWrapper” create a box that contains the entire field, labels, descriptions, widgets, etc…

The wrapper childNodes have the “float” css attribute set to “left” so you can decide where to break lines between them by using css: it gets much easier to put the label over the field, or the messages under etc…

Adding things to fields

Take a look at the password field to see how it adds a strength indicator widget between the div.inputEx-Field and the message.