web-dev-qa-db-ja.com

ドロップダウンのリスト項目のフォントファミリーを変更するにはどうすればよいですか？

フォントファミリを一覧表示するドロップダウンがあります。 Tahoma、Arial、Verdanaなどと同様に、各ドロップダウンアイテムのフォントファミリを、それが表す値に応じて変更します。 Photoshopと同じように。

各ドロップダウンアイテムのCSSを変更しましたが、FireFoxでのみ機能します。他のブラウザでは機能しません。

JQueryプラグインを使いたくありません。

htmlcssselectdrop-down-menu
18
Mohal

これは、select要素の子（options）が実際にはスタイリング可能ではなく、Firefoxが仕様のその部分を無視する唯一のブラウザーであるようだからです。

回避策は、select要素を、スタイリング可能な要素とおそらく対話用の小さなJavaScriptのみを使用するカスタムウィジェットに置き換えることです。ここで行われていることのように： http://jsfiddle.net/sidonaldson/jL7uU/ または http://jsfiddle.net/theredhead/4PQzp/

14
Kris

このようなことができます

<select>
<optgroup style="font-family:arial">
    <option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
    <option>veranda</option>
</optgroup>
2
Kazi Hasan Ali

次の方法で、HTMLドロップダウンのフォントを設定できます。
1。ドロップダウンに表示されるオプションのリストを作成しますが、これらのオプションのいずれにもスタイル/クラスを適用しないでください。 In PHP私はオプションのリストを変数に保存し、その変数を使用して、以下に示すドロップダウンにオプションを追加します。
2。実際にドロップダウンをページに挿入する場合は、SELECTタグを使用して、以下に示すようにそのタグ内にCSSスタイルを設定します。

<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>

私が現在働いているウェブサイトでは、それは100％うまく機能します。これはページで使用したスタイリングにすぎませんが、必要なものであれば何でもかまいません。

2
craig-c