Example 7: Left justified labels

<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>  

<div class="select">
    <label for="delivery">Select Pizza Deilvery</label>
    <select name="delivery" id="delivery" onfocus="parentFocus(event)" onblur="parentBlur(event)">
        <option>Dine in</option>
        <option>Carry out</option>
        <option>Home delivery</option>
        <option>Express air</option>
    </select>
</div>  

  <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>

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

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

div.select label {
  margin: 0;
  padding: 0;
  padding-right: .25em;
  font-size: 100%;
  font-weight: bold;
  display: block;
  width: 10em;
  text-align: left;
  float: left;
  
}

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

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