Example 8: Required response using image

Best Practice Rating: Good

Example Start

Select pizza crust required
Select delivery method required

Example End

HTML Source Code

<fieldset class="radiogroup">
  <legend>Select pizza crust <img src="images/required.png" alt="required" /></legend>
  <ul class="radio">
    <li><input type="radio" name="crust" id="crust1" value="deep" /><label for="crust1">Deep dish</label></li>
    <li><input type="radio" name="crust" id="crust2" value="thick" /><label for="crust2">Thick</label></li>
    <li><input type="radio" name="crust" id="crust3" value="hand" /><label for="crust3">Hand thrown</label></li>
    <li><input type="radio" name="crust" id="crust4" value="thin" /><label for="crust4">Thin</label></li>
  </ul>
</fieldset>

<fieldset class="radiogroup">
  <legend>Select delivery method <img src="images/required.png" alt="required" /></legend>
  <ul class="radio">
    <li><input type="radio" name="delivery" id="del1" value="in" /><label for="del1">Dine in</label></li>
    <li><input type="radio" name="delivery" id="del2" value="out" /><label for="del2">Carry out</label></li>
    <li><input type="radio" name="delivery" id="del3" value="delivery" /><label for="del3">Delivery</label></li>
  </ul>
</fieldset>

Javascript Source Code

  <script type="text/javascript">
// Using JQuery selectors to add onFocus and onBlur event handlers

$(document).ready( function() {

  // Add the "focus" value to class attribute
  $('ul.radio li').focusin( function() {
    $(this).addClass('focus');
  }
  );

  // Remove the "focus" value to class attribute
  $('ul.radio li').focusout( function() {
    $(this).removeClass('focus');
  }
  );

}
);

  </script>

CSS Source Code

  <style type="text/css">
fieldset.radiogroup  {
  margin: 0;
  padding: 0;
  margin-bottom: 1.25em;
  border: none;
}

fieldset.radiogroup legend {
  margin: 0;
  padding: 0;
  font-weight: bold;
  padding-left: 20px;
}

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>