CSS Styled Option Buttons? - css

Question

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 here.
Section of my code currently reads...
<td valign="top" width="910">
<div id="content"><?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<div class="right">
<?php if ($price) { ?>
<div class="price">
<?php if (!$special) { ?>
<?php echo $price; ?>
<?php } else { ?>
<span class="price-old"><?php echo $price; ?></span> <span class="price-new"><?php echo $special; ?></span>
<?php } ?>
<br />
<?php if ($tax) { ?>
<?php } ?>
<?php if ($points) { ?>
<span class="reward"><small><?php echo $text_points; ?> <?php echo $points; ?></small></span> <br />
<?php } ?>
<?php if ($discounts) { ?>
<br />
<div class="discount">
<?php foreach ($discounts as $discount) { ?>
<?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?><br />
<?php } ?>
</div>
<?php } ?>
</div>
<?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 "<p id=\"cmmeta-desc\">".$meta_desc['meta_description']."</p>";
}
mysql_free_result($get_meta_res);
?>
<?php } ?>
<?php if ($options) { ?>
<div class="options">
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<select name="option[<?php echo $option['product_option_id']; ?>]">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</option>
<?php } ?>
</select>
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'radio') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<?php foreach ($option['option_value'] as $option_value) { ?>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
<br />
<?php } ?>
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'checkbox') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<?php foreach ($option['option_value'] as $option_value) { ?>
<input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"> <?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
<br />
<?php } ?>
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'text') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'textarea') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<textarea name="option[<?php echo $option['product_option_id']; ?>]" cols="40" rows="5"><?php echo $option['option_value']; ?></textarea>
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'file') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<a id="button-option-<?php echo $option['product_option_id']; ?>" class="button"><span><?php echo $button_upload; ?></span></a>
<input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" />
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'date') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="date" />
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'datetime') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="datetime" />
</div>
<br />
<?php } ?>
<?php if ($option['type'] == 'time') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="time" />
</div>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
<div class="cart">
<div><?php echo $text_qty; ?>
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<a id="button-cart" class="button2"><span>ADD TO BAG</span></a></div>
<?php if ($minimum > 1) { ?>
<div class="minimum"><?php echo $text_minimum; ?></div>
<?php } ?>
</div>
Never really done anything like these before...
Many Thanks
L

Answer 1

This is a really good tutorial on styling radio buttons.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
From there you can get what your after pretty easily :)
Hope this helps you out!

Answer 2

In the site you linked, they are using a select element with the options inside it. It is then hidden with Javascript, and a list of links (a) is constructed using the dropdown options, which can be easily styled. If you click one of the links, they are tied to the original select element. This can be easily achieved with Javascript.
If you disable Javascript in your browser, and check out that site, you will see the underlying form elements.
Unfortunately, elements like radio buttons, checkboxes and dropdowns cannot really be styled through CSS, only in a very limited way. Most solutions (like the one posted by #Graeme, but there are thousand others) use Javascript to hide these elements and use a substitute element whose actions are linked to the original element.
If you only want to use CSS, there is a tricky CSS3 solution, but it will only work in modern browsers (no IE8 or lower). You can see an example in one of my previous posts: Custom Checkbox .

Answer 3

I think you are referring to the 'GO' button. This is an input element of the type image. Which means it's a clickable button that consists of an image. So in order to get the nice square button, you have to create an image, upload it, and refer to it in the src attribute of your input tag.
Here's an example that looks quite dated, but is simple and straight forward: http://www.echoecho.com/htmlforms14.htm
It also describes the options.
Perhaps a useful tip, if you're not already using it: if you come across something on a site that you want to use, use an inspection tool, like Firebug for Firefox, to see how it's made.
EDIT:
The product size buttons are not actually radio buttons, they are list items <li> and styled using CSS. The value that they represent, are registered using a piece of javascript. This info is posted when you hit the submit button. I don't know If you're familiar with javascript and/or are using a javascript framework, but your situation would be a good one to utilize it.
I've created this jsfiddle with a very straightforward solution, using plain javascript: http://jsfiddle.net/r2K9h/3/
it sets a hidden input field with the size selected. So when you send the form, this value will be submitted as well.