使用颜色和触发下拉操作将下拉列表转换为选择框

Question

请帮助将此下拉列表转换为选择框,颜色如白盒,黑盒等[不勾选框].

所以该页面正在加载,而不是显示下拉我需要显示颜色选择框,请帮忙.

我尝试了一些代码,但它只是部分工作.

<table class="variations" cellspacing="0">
  <tbody>
    <tr>
      <td class="label">
        <label for="pa_available-colors">Available Colors</label>
      </td>
      <td class="value">
        <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
          <option value="" selected="selected">Choose an option</option>
          <option value="black" class="attached enabled" selected="selected">Black</option>
          <option value="white" class="attached enabled" selected="selected">White</option>
          <option value="red" class="attached enabled" selected="selected">Red</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

请帮忙.请看下面的图片,我需要将下拉转换为这种类型的盒子

Answer 1

使用下拉列表:

答案很简单:你做不到.

让我解释一下原因.这个问题的答案也非常非常简单:选项标签上的MSDN.你可以看到这一段:

除背景颜色和颜色外,将忽略通过选项元素的样式对象应用的样式设置.此外,直接应用于各个选项的样式设置会覆盖应用于整个包含的select元素的样式设置.

当然你可以将你的下拉列表转换成其他东西(甚至在链接的问题中......也不是那么懒),但是它仍然是下拉列表吗？有关使用eg radio元素的更多信息,请参阅答案的下一部分.

使用别的东西:

作为一种解决方法,您可以尝试使用,例如,radio元素:

/* General stuff - radio button. */
input[type="radio"] {
  position: relative;
  width: 22px;
  height: 22px;
  vertical-align: bottom;
}
input[type="radio"]:checked:before {
  border: 1px solid #111;
}
/* The "background" - white background with gray border. */
input[type="radio"]:before {
  position: absolute;
  top: -2px;
  left: -2px;
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid #999;
  border-radius: 3px;
  background-color: #fff;
}
/* The "foreground" - color "square". */
input[type="radio"]:after {
  position: absolute;
  top: 1px;
  left: 1px;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.12);
}
/* Colours */
input[type="radio"][value="red"]:after {
  background: #c44;
}
input[type="radio"][value="green"]:after {
  background: #4c4;
}
input[type="radio"][value="blue"]:after {
  background: #44c;
}

Colour:
<div class="list">
  <input type="radio" name="color" value="red" checked>
  <input type="radio" name="color" value="green">
  <input type="radio" name="color" value="blue">
</div>   

这里是隐藏(子菜单)的小提琴:https://jsfiddle.net/sts77L2h/

通过一些额外的工作,您应该能够使其更像下拉列表.或者你可以试验它以获得你能想象到的任何结果.

显然,你也可以尝试使用其他元素radio,甚至可以查看(在编写本文时我们都不知道)提供这些form元素的完整且有效的框架.

TD; DR:

这个问题的转换器与我的CSS合并:JSFiddle.

根据您的需求调整此解决方案.