プレビューで選択フォントドロップダウンリストを作成するには？

フォントを選択できるようにドロップダウンリストを作成したいと思います。このリストでは、各フォントオプションをそのスタイルでフォントのプレビューとして表示したいと思います。上記プレビューで選択フォントドロップダウンリストを作成するには？

<select> 
    <option class="Times-New-Roman" value="Times-New-Roman">Times New Roman</option> 
    <option class="Verdana" value="Verdana">Verdana</option> 
    <option value="Comic-Sans-MS">Comic Sans MS</option> 
    <option value="WildWest">WildWest</option> 
    <option value="Bedrock">Bedrock</option> 
</select>

各クラス名は、それが中に表示される独自のフォントのしているように、各フォントの種類は、それが自分のクラス名です持っているのダウンボックスの基本的な低下は、しかし、それを作るためにどのように動作するように見えることはできませんされてドロップダウンリスト。

解決策を見つけるのに時間を費やしていただきありがとうございます。

よろしく、以下のようなティム

出典

2013-03-29 Anonymous

このような何か？ http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/このサンプル（http://jsfiddle.net/h7YqN/）からフィドルを作成し、最後を見てオプションをドロップダウンから、コミックサンMSがあります。「選択」要素のスタイリングを避けるようにしてください。すべてのブラウザでそれを行うことはできません。代わりに、このコードまたは他のコードを使用して、ドロップダウンの効果を再現します。フォームから選択した値を取得する必要がある場合は、このコードを拡張して非表示の入力に値を適用することもできます。 –

「選択」リストを再設計することはできません。あなたは "li"または類似の "select"リストをシミュレートするために、いくつかのJavaSrciptまたはjQueryを使用する必要があります。それを行うためのスクリプトがたくさんあります。 –

トライ形式。

<select> 
    <option style="font-family:'Times New Roman';" class="Times-New-Roman" value="Times-New-Roman">Times New Roman</option> 
    <option style="font-family:Verdana, Geneva, sans-serif;" class="Verdana" value="Verdana">Verdana</option>

たぶん

出典

2013-03-29 09:04:34 Nilesh

プレビューで選択フォントドロップダウンリストを作成するには？

答えて

関連する問題