All technologies that support CSS
This technique relates to:
Internet Explorer 6.0 and earlier versions for Windows do not support dynamic pseudo-classes for any elements except hyperlinks. Internet Explorer 7 does not support :focus styles for elements other than hyperlinks.
Firefox 1.5, Firefox 2.0 and SeaMonkey 1.1 for Windows support dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, and button elements. However, setting different colors or borders when a radio button or a check box receives focus is not supported.
Opera 9.02 for Windows supports dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, but not for button elements.
Firefox 2.0, Opera 9.02 and SeaMonkey 1.1 for Windows also support adjacent sibling selectors for form labels. Firefox 1.5, Internet Explorer 6.0 and earlier versions for Windows do not support adjacent sibling selectors for form labels.
The objective of this technique is to demonstrate how the current focus can be made visually evident by changing the appearance of the focused element with CSS styling.
In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.
<html> <head> <style type="text/css"> input.text:focus { background-color: #7FFF00; color: #000; } input[type=checkbox]:focus + label, input[type=radio]:focus + label { background-color: #FF6: color: #000; } </style> </head> <body> <form method="post" action="form.php"> <p><label for="fname">Name: </label> <input class="text" type="text" name="fname" id="fname" /> </p> <p> <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br /> <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label> <p> </form> </body> </html>
In this example, the :focus pseudo-class is used to apply a highly visible yellow border around links that receive focus. Use of the "outline" property instead of the "border" property ensures that the border will not perturb the page layout, since outlines are drawn on a separate layer.
<html> <head> <style type="text/css"> a:focus { outline: medium solid yellow; } </style> </head> <body> <p>The <a href="#">link in this paragraph</a> will have a yellow border when it receives the focus.</p> </body> </html>
Resources are for information purposes only, no endorsement implied.
For each control or form label that is styled using the CSS :focus pseudo-class:
Check whether the styling indicates that the control has focus when it receives focus
#1 is true.