Question

我有一个我从数据库中检索的颜色列表，列表中包含colorCode，例如#FFEBCD，＃FFFFFF等我想将列表中每个选项的背景颜色设置为其背景颜色。有人可以告诉我这是否可行，如何使用颜色代码获取每个列表项以反映其颜色。下面是代码。我想真正将颜色显示为列表项的背景。

   <li>
        <form:label for="eyeColorId" path="eyeColorId">Select Eye Color</form:label>        
        <form:select path="eyeColorId" id="eyeColorId">
        <form:options items = "${eyeColor.eyeColorList}" itemValue="colorCode" itemLabel="colorDesc" style="background-color: ${colorCode}"/>
        </form:select>          
        <form:errors path="eyeColorId" id="errors"/>
    </li>

Answer 1

由于每个选项都需要具有不同的样式，您只需要遍历列表的元素并使用<form:option> tag

为每个元素生成一个选项。

Answer 2

原则上，您可以像任何其他元素一样设置option元素的样式。在实践中，特别是在旧版浏览器中存在局限性，并且存在奇怪之处。在现代浏览器中，着色在某种意义上是有效的，正如您可以通过测试

看到的那样

<select>
<option style="background: red">option
<option style="background: green">other option
</select>

颜色并不像您想要的那样完美，因为专注于选项会改变其渲染效果。此外，如果出现任何颜色或多种颜色，您将使用什么作为文字颜色来创造足够的对比度？

因此，更好的方法是使用一组复选框或单选按钮（取决于选择的类型）并将彩色框作为颜色样本关联，例如

<style>
.colorbox {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: solid 1px black;
}
</style>
<fieldset>
<input type=radio name=color value="#FFEBCD" id=FFEBCD>
  <label for=FFEBCD><span class=colorbox style="background: #FFEBCD">&nbsp;
    </span>blanche dalmond</label><br>
<input type=radio name=color value="#FFFFFF" id=FFFFFF>
   <label for=FFFFFF><span class=colorbox style="background: #FFFFFF">&nbsp;
    </span>white</label>
</fieldset>

另一种可能性，在奢侈的情况下，您可以依赖所有拥有现代浏览器的用户，您甚至可以使用HTML5方式：

<input type=color name=color list=colors>
<datalist id=colors>
  <option value="#FFEBCD" label="blanche dalmond">
  <option value="#FFFFFF" label="white">
</datalist>

然而，这在非支持的浏览器上降级很差：对于一个简单的文本输入框，用户需要知道或猜测他必须键入十六进制代码，如#FFEBCD。

Answer 3

试试这个。

  <li>
        <form:label for="eyeColorId" path="eyeColorId">Select Eye Color</form:label>        
        <form:select path="eyeColorId" id="eyeColorId">
        <c:forEach items = "${eyeColor.eyeColorList}" var = "color">
        <form:option style="background-color: ${color}"/>
        </c:forEach>
        </form:select>          
        <form:errors path="eyeColorId" id="errors"/>
    </li>

HTML选择选项元素

3 个答案: