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鏈接，似乎尺寸框位於