如何将颜色框添加到SELECT或CHECKBOX

Question

我想让颜色的选择更直观。例如，我想要一种添加HTML选择菜单或复选框来选择颜色的方法。

(蓝色正方形(-蓝色(白色正方形(-白色(红色方块(-红色。

可以用选择菜单吗？如果没有，用复选框做这件事的最佳方法是什么？用CSS将每一个风格化？或者在它前面添加一个图像？

感谢任何代码示例或链接，谢谢。

Answer 1

由于您只寻找少数颜色，而不是整个范围，因此最好构建自己的输入。我们想要：

1. input[type=radio]选择颜色
2. 包含标签和颜色的输入的标签

要做到这一点，我们可以做一些类似的事情

<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
...
</form>

每个div包含每个颜色选择的HTML：一个值等于颜色的十六进制代码的输入(尽管您可以将其更改为任何您想要的(，以及一个带有颜色框和相关颜色名称的标签。

要创建颜色框，我们可以设置div的大小和背景颜色。做CSS可能是最好的，加载真正不必要的图像是浪费。

.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
...

这样做的一个优点是bg-*类不仅限于这种形式，它还可以应用于其他需要背景颜色的元素。

.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
.bg-green {
background-color: #00ff00;
}
.bg-blue {
background-color: #0000ff;
}
.bg-black {
background-color: #000000;
}

<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#00ff00" id="select-green">
<label for="select-green"><div class="bg-green"></div> Green</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#0000ff" id="select-blue">
<label for="select-blue"><div class="bg-blue"></div> Blue</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#000000" id="select-black">
<label for="select-black"><div class="bg-black"></div> Black</label>
</div>
</form>

如果要使用复选框，可以将name="color" value="..."替换为仅name="..."，并将输入类型从单选更改为复选框。