14

これが可能かどうかはわかりませんが、そうでない場合は、誰かがオプションのアイデアを捨てることができるかどうかはわかりませんが、select タグにさまざまなフォント (具体的には、Google のフォント ディレクトリのフォント) のドロップダウンを表示しようとしています。ドロップダウンでは、各オプションをそれが表すフォントでスタイリングしてプレビューを表示しようとしています

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

ただし、これは機能していないようです。なぜ、またはそれを修正する方法の手がかりはありますか?

4

7 に答える 7

8

option各タグをタグでラップしoptgroup、次のようにスタイルする必要があります。 

<select>

  <optgroup style="font-family:arial">
    <option>Arial</option>
  </optgroup>

  <optgroup style="font-family:verdana">
    <option>veranda</option>
  </optgroup>

  <optgroup style="font-family:other">
    <option>other</option>
  </optgroup>

</select>

于 2012-08-23T14:31:45.400 に答える
7

タグのフォントを設定することはできませんが<option>、特定のスタイルのリストを作成することはできます (ご想像のとおり)。

これが私が試してきたすべてです：

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine");
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma");
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");
h1 {
  font-size: 1.2em;
  margin-top: 10px;
  color: #777;
}
.tangerine {
  font-family: tangerine;
}
.tahoma {
  font-family: tahoma;
}
.timesnewroman {
  font-family: times new roman;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h1>Set with jQuery</h2>
<select id="js">
    <option>Tangerine</option>
    <option>Tahoma</option>
    <option>Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>Set with CSS</h2>
<select id="css">
    <option class="tangerine">Tangerine</option>
    <option class="tahoma">Tahoma</option>
    <option class="timesnewroman">Times New Roman</option>
</select>
<div>&nbsp;</div>
<h1>List</h2>
<ul>
    <li>Tangerine</li>
    <li>Tahoma</li>
    <li>Times New Roman</li>
</ul>

于 2011-01-12T19:16:50.297 に答える
2

多分あなたはjavascriptを使うことができますか？これを試すことができますか？

<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";

// Change anything else that you like!
</script>

<option id="tahoma .....>
于 2011-01-12T19:16:56.947 に答える
1

このように簡単に使用できます

<select id='lstFonts' class='form-control'>
    <option style="font-family:Arial" value="Arial">Arial</option>
    <option style="font-family:Verdana" value="Verdana">Arial</option>
</select>
于 2016-07-30T11:21:31.923 に答える
0

私はそれをするためにハックスタイルの方法を使用しました。

selectタグのスタイルを設定する必要があり、さらにいくつかカスタマイズしたいので、jQuery用のStylish Selectプラグインを使用し、font-family css属性を親要素（リストタグ）にアタッチしました。

これはほとんどコードで機能せず、クロスブラウザ互換でした。

于 2011-01-12T20:45:23.560 に答える