HTML select options element

Question

I have a list of colors i am retrieving from the database the list contains the colorCode e.g. #FFEBCD, #FFFFFF and so on i would like to set the background color of each option in the list to its background color. Can someone tell me if this is possible and how can i get the each list items to reflect their color using the color code. Under is the code. I want to really show the color as the background of the list item.

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

that comes from the database e.g. white #FFFFFF black #000000 — devdar, Oct 31 '12 at 20:11
Where is the : operator from? I've never seen it used in such context. Is that HTML5 or something? — user1534664, Oct 31 '12 at 20:19
no its not html 5 this is from Spring, Spring tags however it renders just like plain html — devdar, Oct 31 '12 at 20:22

score 2 · Answer 1 · answered Oct 31 '12 at 20:46

2

Since every option needs to have a different syle, you just need to iterate through the elements of the list and generate one option for each element, using the <form:option> tag

answered Oct 31 '12 at 20:46

JB Nizet

678,734
91
1,224
1,255

score 1 · Answer 2 · answered Oct 31 '12 at 21:12

In principle, you can style an option element like any other element. In practice, there are limitations especially in older browsers, and oddities. In modern browsers, coloring works in a sense, as you can see by testing just

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

The colors don’t quite work the way you’d want to, as focusing on an option changes its rendering. Moreover, if any color, or a wide range of colors, may appear, what would you use as text color to create sufficient contrast?

So a better approach is to use a set of checkboxes or radio buttons (depending on the type of choice) and associate a colored box as a sample of the color, e.g.

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

Yet another possibility, in a luxury case where you can rely on all users having modern browsers, you could even use the HTML5 way:

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

This, however, degrades poorly on non-supporting browsers: to a simple text input box, and the user needs to know or guess that he must type in a hex code like #FFEBCD.

score 0 · Answer 3 · answered Nov 01 '12 at 04:31

Try this.

  <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 select options element

3 Answers3