Example 6: Fieldset/Legend for grouping

<fieldset class="radiogroup">
<legend>Select pizza crust</legend>
  <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>
</fieldset>

<fieldset class="radiogroup">
<legend>Select delivery method</legend>
  <ul class="radio">
    <li><input type="radio" name="delivery" id="del1" value="in" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="del1">Dine in</label></li>
    <li><input type="radio" name="delivery" id="del2" value="out" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="del2">Carry out</label></li>
    <li><input type="radio" name="delivery" id="del3" value="delivery" onfocus="radioFocus(event)" onblur="radioBlur(event)"/><label for="del3">Delivery</label></li>
  </ul>
</fieldset>

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

  <style type="text/css">

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

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


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>