Example Navigation

Example 5: Highlighting focus

Best Practice Rating: Good

Use javascripting to update styling of checkboxes label with keyboard focus.
Include onFocus and onBlur event handlers on input element to update class value of parent li.
Include CSS :hover psuedo element to highlight the active area of the label for selecting a checkbox.

Example Start

Select Pizza Crust

Example End

HTML Source Code

<div class="select">
    <label for="crust">Select Pizza Crust</label>
    <select name="crust" id="crust" onfocus="parentFocus(event)" onblur="parentBlur(event)">
    <option>Deep dish</option>
    <option>Thick</option>
    <option>Hand thrown</option>
    <option>Thin</option>
  </select>
</div>

Javascript Source Code

  <script type="text/javascript">

//
//   Add focus styling to the parent (DIV) element of the radio button receiving focus
//
function parentFocus( event ) {
  // Get event object  if using Internet Explorer
  var e = event || window.event;

  // Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
  if( e.target )
    e.target.parentNode.className = "select focus";
  else
    e.srcElement.parentNode.className = "select focus";

}

//
//   Remove focus styling from the parent (DIV) element of the radio button receiving focus
//
function parentBlur( event ) {
  // Get event object  if using Internet Explorer
  var e = event || window.event;

  var node;

  // Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
  if( e.target )
    e.target.parentNode.className = "select";
  else
    e.srcElement.parentNode.className = "select";

}
  </script>

CSS Source Code

  <style type="text/css">
div.select {
  margin: 0;
  margin-left: 20px;
  padding: .25em;;
  border: thin solid transparent;
  width: 10em;
}

div.focus,
div.select:hover {
  border: thin solid gray;
}

div.select label {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  display: block;
}

div.select select  {
  margin: 0;
  padding: 0;
  display: block;
  }

div.select select:hover,
div.select select:focus,
div.select select:active {
   background: yellow;
   border-color: gray;
}

  </style>