将下拉菜单转换为带有颜色的选择框并触发下拉操作

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 on option tag。你可以在那里看到这段：

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

当然，您可以将下拉列表转换为something else（它甚至在链接问题中...不要那样懒惰），但它仍然是那么下拉列表呢？有关使用例如的更多信息，请参阅答案的下一部分。 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:

来自this question 的转换器与我的 CSS 合并：JSFiddle。

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

Answer 2

使用 HTML5 input 和 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>

Answer 3

这是 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 4

更新

使用您的 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 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");
})

这里是fiddle