Question

由于产品有其他颜色可供选择，我计划添加一个选项或单选按钮，以选择特定颜色来订购产品。问题是我无法弄清楚如何这样做。这是图像。 http://imgur.com/a/wm6Ny

我正在使用bootstrap。谢谢:)）

我的代码

  <div class="colors">
            <ul>
                <li><input type="radio" name="color" style="background-color:#222"><span></span></li>
                <li><input type="radio" name="color" style="background-color:#6e8cd5"><span></span></li>
                <li><input type="radio" name="color" style="background-color:#44c28d"><span></span></li>
            </ul> 
        </div>

Answer 1

取消现有标记我相信你正在寻找这样的东西：

＆＃13;

.colors ul{list-style:none; padding:0; margin: 0;}

.colors li{margin: 0 20px 0 0; display: inline-block;}

.colors label{cursor: pointer;}

.colors input{display:none;}

.colors input[type="radio"]:checked + .swatch{box-shadow: inset 0 0 0 2px white;}

.swatch{
  display:inline-block;
  vertical-align: middle;
  height: 30px;
  width:30px;
  margin: 0 5px 0 0 ;
  border: 1px solid #d4d4d4;
}

＆＃13;

<div class="colors">
  <ul>
    <li>
      <label>
        <input type="radio" name="color" value="black">
        <span class="swatch" style="background-color:#222"></span> Black
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="color" value="blue">
        <span class="swatch" style="background-color:#6e8cd5"></span> Blue
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="color" value="green">
        <span class="swatch" style="background-color:#44c28d"></span> Green
      </label>
    </li>
  </ul> 
</div>

＆＃13;

https://jsfiddle.net/vkxts1af/1/

单选按钮用于产品的颜色选项

1 个答案: