title: CSS Styled Option Buttons?
body: <p>I'm working through some touches on an e-commerce site for someone and have run into something I'm not sure about.  The product page currently has radio buttons for choosing a product size.  I had a drop down menu in before.  The client wants styled square buttons similar to those on <a href="http://www.topshop.com/webapp/wcs/stores/servlet/ProductDisplay?beginIndex=0&amp;viewAllFlag=&amp;catalogId=33057&amp;storeId=12556&amp;productId=4036789&amp;langId=-1&amp;sort_field=Relevance&amp;categoryId=208523&amp;parent_categoryId=203984&amp;pageSize=20" rel="nofollow">here</a>.</p>
  
  <p>Section of my code currently reads...</p>
  
  <pre><code>&lt;td valign="top" width="910"&gt;
  &lt;div id="content"&gt;&lt;?php echo $content_top; ?&gt;
  &lt;h1&gt;&lt;?php echo $heading_title; ?&gt;&lt;/h1&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="right"&gt;
  
  
   &lt;?php if ($price) { ?&gt;
    &lt;div class="price"&gt;
      &lt;?php if (!$special) { ?&gt;
      &lt;?php echo $price; ?&gt;
      &lt;?php } else { ?&gt;
      &lt;span class="price-old"&gt;&lt;?php echo $price; ?&gt;&lt;/span&gt; &lt;span class="price-new"&gt;&lt;?php echo $special; ?&gt;&lt;/span&gt;
      &lt;?php } ?&gt;
      &lt;br /&gt;
  
      &lt;?php if ($tax) { ?&gt;
  
      &lt;?php } ?&gt;
      &lt;?php if ($points) { ?&gt;
      &lt;span class="reward"&gt;&lt;small&gt;&lt;?php echo $text_points; ?&gt; &lt;?php echo $points; ?&gt;&lt;/small&gt;&lt;/span&gt; &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($discounts) { ?&gt;
      &lt;br /&gt;
      &lt;div class="discount"&gt;
        &lt;?php foreach ($discounts as $discount) { ?&gt;
        &lt;?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?&gt;&lt;br /&gt;
        &lt;?php } ?&gt;
      &lt;/div&gt;
      &lt;?php } ?&gt;
    &lt;/div&gt;
  
  
  
  
  
    &lt;?php
  $get_meta_desc = "SELECT meta_description
  FROM product_description
  WHERE product_id = '".$product_id."'";
  $get_meta_res = mysql_query($get_meta_desc);
  $meta_desc = mysql_fetch_array($get_meta_res, MYSQL_ASSOC);
  if ($meta_desc['meta_description']) {
  echo "&lt;p id=\"cmmeta-desc\"&gt;".$meta_desc['meta_description']."&lt;/p&gt;";
  }
  mysql_free_result($get_meta_res);
  ?&gt;
  
  
    &lt;?php } ?&gt;
    &lt;?php if ($options) { ?&gt;
    &lt;div class="options"&gt;
  
  
  
      &lt;?php foreach ($options as $option) { ?&gt;
      &lt;?php if ($option['type'] == 'select') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;select name="option[&lt;?php echo $option['product_option_id']; ?&gt;]"&gt;
          &lt;option value=""&gt;&lt;?php echo $text_select; ?&gt;&lt;/option&gt;
          &lt;?php foreach ($option['option_value'] as $option_value) { ?&gt;
          &lt;option value="&lt;?php echo $option_value['product_option_value_id']; ?&gt;"&gt;&lt;?php      echo $option_value['name']; ?&gt;
          &lt;?php if ($option_value['price']) { ?&gt;
          (&lt;?php echo $option_value['price_prefix']; ?&gt;&lt;?php echo $option_value['price']; ?&gt;)
          &lt;?php } ?&gt;
          &lt;/option&gt;
          &lt;?php } ?&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'radio') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;?php foreach ($option['option_value'] as $option_value) { ?&gt;
        &lt;input type="radio" name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" value="&lt;?php echo $option_value['product_option_value_id']; ?&gt;" id="option-value-&lt;?php echo $option_value['product_option_value_id']; ?&gt;" /&gt;
        &lt;label for="option-value-&lt;?php echo $option_value['product_option_value_id']; ?&gt;"&gt;&lt;?php echo $option_value['name']; ?&gt;
          &lt;?php if ($option_value['price']) { ?&gt;
          (&lt;?php echo $option_value['price_prefix']; ?&gt;&lt;?php echo $option_value['price']; ?&gt;)
          &lt;?php } ?&gt;
        &lt;/label&gt;
        &lt;br /&gt;
        &lt;?php } ?&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'checkbox') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;?php foreach ($option['option_value'] as $option_value) { ?&gt;
        &lt;input type="checkbox" name="option[&lt;?php echo $option['product_option_id']; ?&gt;][]" value="&lt;?php echo $option_value['product_option_value_id']; ?&gt;" id="option-value-&lt;?php echo $option_value['product_option_value_id']; ?&gt;" /&gt;
        &lt;label for="option-value-&lt;?php echo $option_value['product_option_value_id']; ?&gt;"&gt; &lt;?php echo $option_value['name']; ?&gt;
          &lt;?php if ($option_value['price']) { ?&gt;
          (&lt;?php echo $option_value['price_prefix']; ?&gt;&lt;?php echo $option_value['price']; ?&gt;)
          &lt;?php } ?&gt;
        &lt;/label&gt;
        &lt;br /&gt;
        &lt;?php } ?&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'text') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;input type="text" name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" value="&lt;?php echo $option['option_value']; ?&gt;" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'textarea') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;textarea name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" cols="40" rows="5"&gt;&lt;?php echo $option['option_value']; ?&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'file') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;a id="button-option-&lt;?php echo $option['product_option_id']; ?&gt;" class="button"&gt;&lt;span&gt;&lt;?php echo $button_upload; ?&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;input type="hidden" name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" value="" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'date') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;input type="text" name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" value="&lt;?php echo $option['option_value']; ?&gt;" class="date" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'datetime') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;input type="text" name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" value="&lt;?php echo $option['option_value']; ?&gt;" class="datetime" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;?php } ?&gt;
      &lt;?php if ($option['type'] == 'time') { ?&gt;
      &lt;div id="option-&lt;?php echo $option['product_option_id']; ?&gt;" class="option"&gt;
        &lt;?php if ($option['required']) { ?&gt;
        &lt;span class="required"&gt;*&lt;/span&gt;
        &lt;?php } ?&gt;
        &lt;b&gt;&lt;?php echo $option['name']; ?&gt;:&lt;/b&gt;&lt;br /&gt;
        &lt;input type="text" name="option[&lt;?php echo $option['product_option_id']; ?&gt;]" value="&lt;?php echo $option['option_value']; ?&gt;" class="time" /&gt;
      &lt;/div&gt;
  
      &lt;?php } ?&gt;
      &lt;?php } ?&gt;
    &lt;/div&gt;
    &lt;?php } ?&gt;
    &lt;div class="cart"&gt;
      &lt;div&gt;&lt;?php echo $text_qty; ?&gt;
        &lt;input type="text" name="quantity" size="2" value="&lt;?php echo $minimum; ?&gt;" /&gt;
        &lt;input type="hidden" name="product_id" size="2" value="&lt;?php echo $product_id; ?&gt;" /&gt;
        &amp;nbsp;&lt;a id="button-cart" class="button2"&gt;&lt;span&gt;ADD TO BAG&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  
  
  
      &lt;?php if ($minimum &gt; 1) { ?&gt;
      &lt;div class="minimum"&gt;&lt;?php echo $text_minimum; ?&gt;&lt;/div&gt;
      &lt;?php } ?&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Never really done anything like these before...</p>
  
  <p>Many Thanks
  L</p>