2

重複の可能性:
スタイル選択オプション

option要素内に 2 つのスタイルを適用できるかどうか疑問に思っています。たとえば、以下のコードでは、製品名をスタイルcolor:black;にし、価格を別のスタイルにしたいと考えていcolor:red; font-weight:bold;ます。価格をラップしようとしましspan.priceたが、うまくいきませんでした。

<select>
  <option>Apple  <span class="price">$1.00</span></option>
  <option>Banana <span class="price">$2.50</span></option>
  <option>Cherry <span class="price">$1.50</span></option>
</select>
4

2 に答える 2

2

optionスタイルは、プラットフォームにネイティブな方法でスタイル設定されます。マークアップを変更せずに (および/または JavaScript を使用せずに) やりたいことを実行することはできません

于 2012-12-04T18:36:35.767 に答える
0

このCSSをHTMLドキュメントまたは外部スタイルシートで試してください（外部スタイルシート<style>に配置する場合はタグを削除してください）。

<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>

これを行うことで、基本的に「選択したすべてのオプションのテキストの色を黒にする必要があります」と言っています。次に、「選択範囲内のオプション内に「価格」のクラスがあるスパンはすべて、赤いテキスト色にする必要があります」と言ってオーバーライドします。

于 2012-12-04T18:35:44.740 に答える