Forms With Style
:focus Pseudoclass
Setting Style with JS
- Introduction
- :focus Pseudoclass
- Buttons
- Radio & Checkbox
- Select Boxes
- Fieldset, Legend, Label
- Summary
Next in this tutorial: Buttons
Name:
The :focus pseudoclass applies to elements that have been given focus. Text field elements can recieve focus when a user clicks them or tabs to them.
IE6 for windows does not recognize the focus pseudoclass. Netscape 6 does, and IE5 Mac does.
Here is another input field. This time I've assigned it an id and applied the focus pseudoclass. Again, if you're on a Windows machine running IE5 or IE6, you won't see any difference.
input#noOutline{
outline:none;
border-color: #556B80;
background-color: #f1f3f6;
}
input#noOutline:focus{
outline:none;
background-color: #fff;
}
Name:
Things that you can change include font and text properties such as line height, borders, and dimensions. Background images are respected in Netscape, IE5.5 on windows, and IE5 Mac. Background color, with the exception of the value "transparent" is respected on all three*.
Tags
- APE
- Best Practices
- Browsers
- CSS
- Debugging
- Design Patterns
- ECMAScript 4
- JSON
- JavaScript
- Testing
- Threads
- Widget
Archived Scripts
AnimTree
Tabs
GlideMenus
DragLib
