0

我有一个从数据库中检索的颜色列表，该列表包含颜色代码，例如#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>
4

3 回答 3

2

由于每个选项都需要有不同的样式，因此您只需要遍历列表的元素并使用<form:option>标签为每个元素生成一个选项

于 2012-10-31T20:46:54.923 回答
1

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 这样的十六进制代码。

于 2012-10-31T21:12:08.083 回答
0

尝试这个。

  <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>
于 2012-11-01T04:31:46.573 回答