CSS样式选项按钮？

我正在通过一些电子商务网站上的某些人接触某人，并遇到了我不确定的事情。产品页面目前有用于选择产品尺寸的单选按钮。我之前有一个下拉菜单。客户需要与here类似的方形按钮。我的代码CSS样式选项按钮？

科目前读...

<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; ?>" /> 
     &nbsp;<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>

从来没有真正喜欢做这些事情之前...

非常感谢大号

来源

2011-11-16 user1049419

正方形大小选择框实际上不是单选按钮。它们是HTML元素，通过使用JavaScript来模拟单选按钮的行为。请参阅Grame Leighfields对啧啧的回答。 – HerrSerker

这是一个非常好的教程造型单选按钮。

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

从那里你可以得到什么你很轻松地后:)

希望这可以帮助你！

来源

2011-11-16 10:26:47

谢谢格雷姆我会看看它！ – user1049419

很高兴帮助你！ –

我想你是指'去'按钮。这是image类型的input元素。这意味着它是一个包含图像的可点击按钮。因此，为了获得漂亮的方形按钮，您必须创建一个图像并将其上传，然后在输入标签的src属性中进行引用。
下面是一个看起来相当过时的例子，但它很简单直接：http://www.echoecho.com/htmlforms14.htm
它还介绍了这些选项。

如果您还没有使用它，也许是一个有用的提示：如果您在某个网站上发现了某个要使用的内容，请使用检查工具（如Firebug for Firefox）来查看它是如何制作的。

编辑：

产品尺寸按钮实际上并不单选按钮，它们是列表项<li>和使用CSS样式。它们代表的值是使用一段JavaScript注册的。此信息在您点击提交按钮时发布。我不知道如果您熟悉JavaScript和/或正在使用JavaScript框架，但您的情况将是一个很好的利用它。

我创造了这个用的jsfiddle一个非常简单的解决方案，使用普通的JavaScript：http://jsfiddle.net/r2K9h/3/
它设置一个隐藏input场与选择的尺寸。所以当你发送表单时，这个值也会被提交。

来源

2011-11-16 10:27:16 kasimir

感谢您的回复。那么这些大小的选择都是一个go按钮吗？对于我发送的Topshop.com链接，似乎尺寸框位于