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...">
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>
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>
