4 に答える
標準の選択リストでスタイルを細かく設定することはできません。これには、標準の選択の代わりに動的な置換 (Javascript で作成および制御) が必要であり、値を前後にフィードします。
たとえば、次の例は私の主張をもう少し明確に示しています。たとえば、順不同のリストを含む div など、この方法でスタイルを設定できるまったく異なる HTML 要素のセットが必要になります。オプション 6 は太字のテキストでスタイル設定されていることに注意してください。
<div id="list-simulation">
<ul>
<li>Option 4</li>
<li class="selected">Opt<strong>ion 5</strong></li>
<li>Option 6</li>
</ul>
</div>
添付された Javascript ロジックがリスト項目のクリックをインターセプトし、それらを非表示の選択メニューに渡します。次に、対応するオプションを選択して、フォーム送信がユーザーの決定を引き継ぐようにします。
<select name="real-list">
<option value="1">Option 4</option>
<option value="2" selected="selected">Option 5</option>
<option value="3">Option 6</option>
</select>
私が近づくことができる最も近いものは、まだ哀れです。それでも投稿します。
背景画像の配置を使用する:
<select>
<option></option>
<option>Option 1</option>
<option style="color: #000;
background: #ffffff
url(http://i49.tinypic.com/15ybyaw.jpg)
repeat-y 2em 0px"
>Option 2</option>
<option>Option 3</option>
</select>
FF3.5 でのみレンダリングされ、IE や Chrome などではレンダリングされません。また、ハイライトの位置を正確に取得することは、別のトリッキーな作業です。おそらく固定幅フォントの方がうまく機能します。
FFのスクリーンショットは次のとおりです。
これはHTMLとCSSでは不可能です..そして単純なJavascriptでも不可能です..使用できるものは何でも(つまり動的/静的コンテンツ)最終的には..スパンまたはdiv要素内にスタイルを記述する必要があります..ここでの制限はスタイルはリストに対して実行する必要があり、子要素として、またはOption
許可しません。Span
DIV
別の方法は( Jonathanによって提案されたように)完全に異なるjavascriptイベントを使用することです..これはのように動作<Select>
しますが、選択されません..
ただし、ドロップダウンリストの基本的な要件ではないため、あらゆる点で通常よりも多くの労力(デザイナーとブラウザーの負担)が必要になります。
これは CSS だけでできるとは思えません。JavaScript を使用する必要があります。