使用下拉列表：

答案很简单：你不能。

让我解释一下原因。这个问题的答案也非常非常简单：MSDN on option tag。你可以在那里看到这一段：

除了背景颜色和颜色之外，通过样式对象为选项元素应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个包含选择元素的样式设置。

当然，您可以将下拉列表转换为其他内容（甚至在链接问题中...不要那么懒惰），但它仍然是下拉列表吗？有关使用 egradio元素的更多信息，请参阅答案的下一部分。

使用其他东西：

作为一种解决方法，您可以尝试使用例如radioelement：

/* 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;博士：

来自这个问题的转换器与我的 CSS 合并：JSFiddle。

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

将 HTML5input与 一起使用type="color"，示例如下：

在选项列表中，您可以指定要查看的颜色列表。

 <table class="variations" cellspacing="0">
      <tbody>
        <tr>
          <td class="label">
            <label for="pa_available-colors">Available Colors</label>
          </td>
          <td class="value">
           <input type="color" id="pa_available-colors" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors" list="colors">
 <datalist id="colors">
  <option>#ff0000</option>
  <option>#0000ff</option>
  <option>#00ff00</option>
  <option>#ffff00</option>
  <option>#00ffff</option>
 </datalist>
          </td>
        </tr>
      </tbody>
    </table>

这是CSS：

select option[value="black"]{
   color:#fff;
    background: black;
}

select option[value="white"]{ 
color:#000;
    background: white;
}
select option[value="red"]{
   color:#fff;
    background: red;
}

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

但是，我建议您只添加selected="selected"到value="".

更新

使用您的 HTML。

见小提琴

原来的

您可以使用一些 JavaScript 将您的选择转换为收音机。然后使用一些 CSS 来处理结果 HTML 的呈现。

从此转化；

<div class="value">
  <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
    <option value="">Choose an option</option>
    <option value="black" class="attached enabled" selected="selected">Black</option>
    <option value="white" class="attached enabled">White</option>
    <option value="red" class="attached enabled">Red</option>
  </select>
</div>

对此；

<div class="value">
  <input type="radio" name="attribute_pa_available-colors" value="">
  <label for="attribute_pa_available-colors">Choose an option</label>

  <input type="radio" name="attribute_pa_available-colors" value="black" checked="checked">
  <label for="attribute_pa_available-colors">Black</label>

  <input type="radio" name="attribute_pa_available-colors" value="white">
  <label for="attribute_pa_available-colors">White</label>

  <input type="radio" name="attribute_pa_available-colors" value="red">
  <label for="attribute_pa_available-colors">Red</label>
</div>

在这里看到小提琴

我认为这段代码会帮助你做你想做的事

html

<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">Black</option>
          <option value="white" class="attached enabled">White</option>
          <option value="red" class="attached enabled">Red</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

CSS

.selectbox>span {
  padding: 10px;
  border: 2px solid #fff;
  display: inline-block;
  vertical-align: middle;
}

.selectbox {
  border: 1px solid #dddddd;
  display: inline-block;
  cursor: pointer;
}

.selectbox.active {
  border: 1px solid #333;
}

查询

$("#pa_available-colors option").each(function() {
  //get values of all option
  var val = $(this).val();

  //do magic create boxes like checkbox
  $("td.value").append('<div class="selectbox" data-color="' + val + '"><span style="background-color:' + val + '"></span></div>');

});
//remove empty selectbox
$('.selectbox[data-color=""]').remove();

//change select box on click
$(".selectbox").click(function() {
  //remove selected from others
  $(".selectbox").removeClass("active");
  //do active to selected
  $(this).addClass("active");
  //get value
  var optVal = $(this).data("color");

  $("#pa_available-colors").val(optVal) 

});

//change select box on dropdown change
$("#pa_available-colors").change(function(){
    var optVal = $(this).val();
  $(".selectbox").removeClass("active");
  $(".selectbox[data-color='"+optVal+"']").addClass("active");
})

这是小提琴