Form Control States

In addition to the :focus state, Bootstrap offers styling for disabled inputs and classes for form validation.

Input focus

When an input receives :focus (i.e., a user clicks into the input or tabs onto it), the outline of the input is removed and a box-shadow is applied. I remember the first time that I saw this on Twitter’s site; it blew me away, and I had to dig into the code to see how they did it. In WebKit, this is accomplished in the following manner:

input {
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: box-shadow linear 0.2s;
}

input:focus {
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(82, 168, 236, 0.6);
}

The <input> has a small inset box-shadow, which gives the appearance that the input sits lower than the page (below example). When :focus is applied, an 8px light blue border appears. The webkit-transition tells the browser to apply the effect in a linear manner over 0.2 seconds:

<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Untitled
Nice and subtle; a great effect.

Disabled input

If you need to disable an input, simply adding the disabled attribute will not only disable it; it will also change the styling and the mouse cursor when the cursor hovers over the element (below):

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Untitled

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages (below example). To use, simply add the appropriate class to the surrounding .controlgroup:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="control-group warning">
		<label class="control-label" for="inputWarning">Input with warning</label>
		<div class="controls">
			<input type="text" id="inputWarning"> <span class="help-inline">Something
				may have gone wrong</span>
		</div>
	</div>
	<div class="control-group error">
		<label class="control-label" for="inputError">Input with error</label>
		<div class="controls">
			<input type="text" id="inputError"> <span class="help-inline">Please
				correct the error</span>
		</div>
	</div>
	<div class="control-group success">
		<label class="control-label" for="inputSuccess">Input with success</label>
		<div class="controls">
			<input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span>
		</div>
	</div>
</body>
</html>

Untitled

Share

You may also like...