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

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元素的样式设置。

当然你可以将你的下拉列表转换成其他东西 （甚至在链接的问题中......也不是那么懒），但是它仍然是下拉列表吗？ 有关使用例如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 。

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

Answer 2

这是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="" 。

Answer 3

更新

使用您的HTML。

见FIDDLE

原版的

您可以使用一些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>

请在此处查看FIDDLE

Answer 4

使用带有type="color" HTML5 input ，这是示例：

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

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

Answer 5

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

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

JQuery的

$("#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");
})

这里是小提琴