CSS样式的选项按钮？

Question

我正在为某人处理电子商务网站的一些操作，但遇到了一些我不确定的事情。产品页面当前具有用于选择产品尺寸的单选按钮。我之前有一个下拉菜单。客户想要类似于here 上的样式方形按钮。

我的代码部分当前读取...

<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>

以前从未真正做过类似的事情......

非常感谢 升

Answer 1

这是一个关于单选按钮样式的非常好的教程。

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

从那里你可以很容易地得到你想要的东西:)

希望对你有所帮助！

Answer 2

在您链接的站点中，他们使用了 select 元素，其中包含选项。然后用 Javascript 隐藏它，并使用下拉选项构建链接列表 (a)，可以轻松设置样式。如果单击其中一个链接，它们将绑定到原始选择元素。这可以通过 Javascript 轻松实现。

如果您在浏览器中禁用 Javascript，并查看该站点，您将看到底层表单元素。

不幸的是，单选按钮、复选框和下拉菜单等元素无法真正通过 CSS 设置样式，只能以非常有限的方式进行设置。大多数解决方案（如@Graeme 发布的解决方案，但也有thousand others）使用Javascript 来隐藏这些元素并使用其操作链接到原始元素的替代元素。

如果你只想使用 CSS，有一个棘手的 CSS3 解决方案，但它只适用于现代浏览器（没有 IE8 或更低版本）。您可以在我之前的一篇文章中看到一个示例：Custom Checkbox。

Answer 3

我认为您指的是“开始”按钮。这是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 字段并选择了大小。所以当你发送表单时，这个值也会被提交。