Skip to Menu
CSS » fieldset.form

Styling fields contained within a fieldset (nothing fancy, just lined up labels (text right-aligned) and fields). Tested in Firefox 2.0, Opera 9.0.2, Internet Explorer 6 and 7.

Sample

fieldset.form
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.

HTML

<fieldset class="form">
	<legend>fieldset.form</legend>
	<div class="field">
		<label for="shorttextbox">shorttextbox:</label>
		<input id="shorttextbox" class="input shorttextbox" />
	</div>
	<div class="field">
		<label for="textboxinput">textbox:</label>
		<input id="textboxinput" class="input textbox" />
	</div>
	<div class="field">
		<label for="longtextbox">longtextbox:</label>
		<input id="longtextbox" class="input longtextbox" />
	</div>
	<div class="field">
		<label for="textboxtextarea">textbox:</label>
		<textarea id="textboxtextarea" rows="5" cols="26" class="input textbox"></textarea>
	</div>
	<div class="field">
		<label for="time">time:</label>
		<input id="time" class="input time" value="13:45" />
	</div>
	<div class="field">
		<label for="date">date:</label>
		<input id="date" class="input date" value="14/12/2007" />
	</div>
	<div class="field">
		<label for="dropdown">dropdown list:</label>
		<select id="dropdown" class="input">
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select>
	</div>
	<div class="field">
		<label class="textlabel">
			hiddenfield:</label>
		<div class="blocktext">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
			<input id="hiddenfield" type="hidden" value="2" />
		</div>
	</div>
	<div class="buttons">
		<input type="submit" class="button" value="Button 1" />
		<input type="submit" class="button" value="Button 2" />
	</div>
</fieldset>

CSS

fieldset.form
{
	padding: 0 6px 6px 6px;
	border: 2px solid #B5C7DD;
	margin-bottom: 6px;
}

fieldset.form legend 
{
	font-size: 1.1em;
	line-height: 1.2em;
	font-weight: bold;
	color: #fff;
	padding: 1px;
	margin-bottom: 12px;
	padding-top: 4px;
}

div.field
{
	margin-bottom: 6px;
}

div.field label 
{
	clear: none;
	display: block;
	float: left;
	width: 125px;
	text-align: right;
	/*
		increase or decrease line-height depending on font-size set in 'div.field .input'
		trial and error needed to get it right
	 */
	line-height: 1.7em;
	padding-right: 6px;
}

div.field label.error
{
	display: inline;
	float: none;
	text-align: left;
	padding-right:0;
}

div.field label.textlabel
{
	line-height: normal;
}

div.field div.blocktext
{
	margin-left: 131px; /* 'div.field label' width + padding */
	zoom: 1; /* trigger hasLayout in IE6 */
}

div.field .input,
fieldset.form input.button
{
	font-size: 1.05em;
	font-family: 'Trebuchet MS', Arial , Sans-Serif;
}

div.field .input
{
	border: solid #67874f 1px;
	padding: 2px;
}

div.field input.textbox
{
	width: 9em;
}

div.field input.longtextbox,
div.field textarea.textbox
{
	width: 420px;
}

div.field input.shorttextbox
{
	width: 4em;
}

div.field input.time
{
	width: 3em;
}

div.field input.date
{
	width: 5.5em;
}

div.field textarea.textbox
{
	height: 10em;
	padding: 2px;
	overflow: auto;
}

fieldset.form div.buttons 
{
	margin-left: 131px; /* 'div.field label' width + padding */
}

fieldset.form div.buttons input.button,
fieldset.form div.buttons button
{
	text-align: center; /* without this, button text is left-aligned in IE */
}