Example 5: Highlighting focus

Best Practice Rating: Good

Example Start

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;
  background-color: lightyellow;
}


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: lightyellow;
   border-color: gray;
}

  </style>