Example 6: Fieldset/Legend for grouping checkboxes

<fieldset class="group">
<legend>Select standard pizza toppings</legend>
<ul class="checkbox">
  <li><input type="checkbox" id="cb1" value="pepperoni" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb1">Pepperoni</label></li>
  <li><input type="checkbox" id="cb2" value="sausage" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb2">Sausage</label></li>
  <li><input type="checkbox" id="cb3" value="mushrooms" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb3">Mushrooms</label></li>
  <li><input type="checkbox" id="cb4" value="onions" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb4">Onions</label></li>
  <li><input type="checkbox" id="cb5" value="gpeppers" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb5">Green Peppers</label></li>
  <li><input type="checkbox" id="cb6" value="xcheese" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb6>">Extra Cheese</label></li>
</ul>
</fieldset>

<fieldset class="group">
<legend>Select <span class="rem">premium</span> pizza toppings (extra cost)</legend>
<ul class="checkbox">
  <li><input type="checkbox" id="cb7" value="proscuitto" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb7">Proscuitto</label></li>
  <li><input type="checkbox" id="cb8" value="portobello" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb8">Portobello Mushrooms</label></li>
  <li><input type="checkbox" id="cb9" value="ypeppers" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb9">Yellow Peppers</label></li>
  <li><input type="checkbox" id="cb10" value="bcheese" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb10">Blue Cheese</label></li>
  <li><input type="checkbox" id="cb11" value="shrimps" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb11">Shrimps</label></li>
  <li><input type="checkbox" id="cb12" value="sundried" onfocus="parentFocus(event)" onblur="parentBlur(event)"/><label for="cb12">Sun Dried Tomatoes</label></li>
</ul>
</fieldset>

  <script type="text/javascript">
//
//   Add focus styling to the parent (LI) 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 = "focus";
  else
    e.srcElement.parentNode.className = "focus";
  
}

//
//   Remove focus styling from the parent (LI) 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 = "";
  else
    e.srcElement.parentNode.className = "";

}
  </script>

  <style type="text/css">

fieldset.group  {
  margin: 0;
  padding: 0;
  margin-bottom: 1.25em;
  padding: .125em;
}

fieldset.group legend {
  margin: 0;
  padding: 0;
  font-weight: bold;
  margin-left: 20px;
  font-size: 100%;
  color: black;
}


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

ul.checkbox li input {
  margin-right: .25em;
}

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

ul.checkbox li label {
  margin-left: ;
}
ul.checkbox li:hover,
ul.checkbox li.focus  {
  background-color: lightyellow;
  border: 1px gray solid;
  width: 12em;
}


  </style>