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

Question

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请帮忙。请看下面的图片，我需要将下拉菜单转换成这种类型的盒子

Answer 1

使用下拉列表：

答案很简单：你不能。

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

  

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

当然，您可以将下拉列表转换为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

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

将HTML5 input与type="color"一起使用，例如：

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

我认为此代码可以帮助您实现

HTML

std::string str1 = "<GLVertex>\n#version 450 core\nlayout(location = 0) in vec3 pos;\nin VertexInfo{\n    vec2 uv;\n}vertexInfo;\nvoid main(){\n    gl_Position = vec4(pos, 1.0);\n    vertexInfo.uv = pos.xy;\n}\n<GLVertex/>\n<GLFragment>\n#version 450 core\nlayout(location = 0) uniform sampler2D g_map;\nuniform Color {\n    vec4 color;\n};\nlayout(location = 0) out vec4 fragColor;\nvoid main(){\n    fragColor = texture(g_map, vertexInfo.uv);\n}\n<GLFragment/>"; 
std::regex reg1("<GLVertex>([^\\x00]*?)<GLVertex/>");
std::smatch find1;
if (std::regex_search(str1, find1, reg1)){
    std::cout << find1[1].str();
}

CSS

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

JQuery

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

这里是fiddle