This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.
Changes are displayed as follows:
CSS, HTML and XHTML
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. Include the :active CSS pseudo class to achieve the same effect as :focus in Internet Explorer for (X)HTML links (a element).
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 visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.
[end change]Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.
[end add]In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.
Here is the content to be displayed:
Example Code:
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">Services</a></li>
<li class="page_item"><a href="/projects">Projects</a></li>
<li class="page_item"><a href="/demos">Demos</a></li>
<li class="page_item"><a href="/about-us">About us</a></li>
<li class="page_item"><a href="/contact-us">Contact us</a></li>
<li class="page_item"><a href="/links">Links</a></li>
</ul>Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:
Example Code:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}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.
Example Code:
<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.
Example Code:
<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 element able to attain focus:
[end add]Using a mouse, hover over the element.
Check that the background or border changes color.
Move the mouse away from the object before attempting keyboard focus.
Using a keyboard, tab to the element.
Check that the background or border changes color.
Check that the background or border changes in color are removed when the element loses focus.
For each control or form label that is styled using the CSS :focus pseudo-class:
[end delete]Check whether the styling indicates that the control has focus when it receives focus
Checks #3, #5 and #6 are true.
[end change]