29

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

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

jQueryプラグインは使いたくありません。

4

8 に答える 8

19

これは、select要素の子（options）が実際にはスタイル設定可能ではなく、Firefoxが仕様のその部分を無視する唯一のブラウザーであるように思われるためです。

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

于 2012-05-22T05:30:11.750 に答える
5

あなたはこのようなことをすることができます

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

于 2018-11-03T09:44:34.330 に答える
4

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

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

それは私が現在働いているウェブサイトで私にとって100％うまくいきます。これは私が自分のページで使用したスタイルですが、必要なものなら何でもかまいません。

于 2016-09-08T17:01:47.403 に答える
2

これは古い質問ですが、すべてではないにしても、ほとんどのブラウザで機能するように見えるより簡単な解決策を見つけました（FireFox、Chrome、およびEdgeでテスト済み）。

の個々のアイテムのスタイルを変更するには、タグに属性をselect追加するだけです。styleoption

次に例を示します。

<select>
    <option style="font-family:Arial;background-color:#F22">Arial</option>
    <option style="font-family:'Arial Black'">Arial Black</option>
    <option style="font-family:Verdana">Verdana</option>
</select>

于 2021-11-10T17:30:41.873 に答える
0

CSSでできることは、あなたが説明したことです。要素の設定です。これにより、ブラウザーのサポートが制限されますfont-family。optionブラウザはselect、CSSの影響を部分的または完全に受けないルーチンを使用して要素を実装できます。

回避策は、ラジオボタンのセットなど、要素以外のものを使用することですがselect、もちろん、ドロップダウンメニューとは異なる方法でレンダリングされます。次に、例えばを使用することができます

<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
于 2012-05-22T05:26:18.633 に答える
0

私はCSSの賢い人ではありませんが、select要素のスタイルを設定するとフォントが変わる場合は、他の多くの回答が送信するように、selectを参照するCSSルールも機能するはずです。

私の場合、フォントファミリをhtmlに設定し、 select要素を除くすべての場所に適用しました。そこで、ルールを変更してhtmlに適用し、要素を選択すると、機能しました。ChromeとEdgeでテスト済み（ただし、Edgeは最初から選択ルールを必要としませんでした）。

結論：html、select {font-family：Verdana、Geneva、sans-serif; }

于 2020-01-12T00:50:38.520 に答える
-5

これにより、これを達成するための方法についてのアイデアが得られるはずです。

<select>

    <option value="Arial">First</option>
    <option value="Verdana">Second</option>


    </select>




    $(function() {
    $('select > option').hover(function() {
        $(this).parent().css({fontFamily:$(this).val()})    
})            
})

JSFIDDLE

于 2012-05-22T05:27:39.053 に答える
-5

これを試して：

<html>
  <head>
    <style>
.styled-select {
        overflow: hidden;
        height: 30px;
}
.styled-select select {
        font-size: 14pt;
        font-family:"Times New Roman",Times,serif;
        height: 10px;
}
</style>
    <title></title>
  </head>
  <body>
    <div class="styled-select">
      <select>
        <option selected="selected" >One</option>
        <option >Two</option>
      </select>
    </div>
  </body>
</html>
于 2014-05-23T14:12:14.077 に答える