Example Navigation

Example 5: Highlighting focus

Best Practice Rating: Good

Use javascripting to update styling of radio button 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 radio button.

Example Start

Select pizza crust

Deep dish
Thick
Hand thrown
Thin

Example End

HTML Source Code

<div class="radiogroup">
  <div class="label">Select pizza crust</div>
  <ul class="radio">
    <li><input type="radio" name="crust" id="crust1" value="deep" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="crust1">Deep dish</label></li>
    <li><input type="radio" name="crust" id="crust2" value="thick" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="crust2">Thick</label></li>
    <li><input type="radio" name="crust" id="crust3" value="hand" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="crust3">Hand thrown</label></li>
    <li><input type="radio" name="crust" id="crust4" value="thin" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="crust4">Thin</label></li>
  </ul>
</div>

Javascript Source Code

  <script type="text/javascript">

//
//   Add focus styling to the parent (LI) element of the radio button receiving focus
//
function radioFocus( 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 = "focus";
  else
    e.srcElement.parentNode.className = "focus";

}

//
//   Remove focus styling from the parent (LI) element of the radio button receiving focus
//
function radioBlur( 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 = "";
  else
    e.srcElement.parentNode.className = "";

}
  </script>

CSS Source Code

  <style type="text/css">
div.radiogroup div.label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  font-weight: bold;
}

ul.radio  {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  list-style: none;
}

ul.radio li {
  border: 1px transparent solid;
}

ul.radio li:hover,
ul.radio li.focus  {
  background-color: lightyellow;
  border: 1px gray solid;
  width: 10em;
}

  </style>