Example Navigation
Example 2: Highlighting keyboard focus
Best Practice Rating: Good
- TUse CSS
:focus, :active and :hover to highlight focus on an input button.
Example Start
Example End
HTML Source Code
<div class="button">
<input type="button"
value="Press me" onclick='alert("You pressed me!")'/>
</div>
<div class="button">
<input type="submit" onclick='alert("You pressed me!")'/>
</div>
<div class="button">
<button onclick='alert("You pressed me!")'>
Example Button</button>
</div>
CSS Source Code
<style type="text/css">
div.button {
margin: 0;
padding: 0;
margin-left: 20px;
margin-bottom: .5em;
font-size: 100%;
font-weight: bold;
}
div.button button:focus,
div.button button:active,
div.button input:active,
div.button input:focus {
border-color: black;
border-style: solid;
background: yellow;
}
div.button button:hover,
div.button input:hover {
border-color: black;
border-style: solid;
}
</style>