0

データベースから取得している色のリストがあります。リストには、#FFEBCD、#FFFFFF などの colorCode が含まれています。リスト内の各オプションの背景色をその背景色に設定したいと思います。これが可能かどうか、またカラーコードを使用して各リスト項目に色を反映させるにはどうすればよいか教えてください。下はコードです。リストアイテムの背景として実際に色を表示したい。

   <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

すべてのオプションは異なるスタイルを持つ必要があるため、タグを使用して、リストの要素を繰り返し処理し、要素ごとに 1 つのオプションを生成するだけです。<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 のような 16 進コードを入力する必要があることを知るか推測する必要があります。

于 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 に答える