web-dev-qa-db-ja.com

選択オプションのフォントサイズを変更するにはどうすればよいですか？

選択オプションのドロップダウンリストのスタイルを設定しようとしています。オプションのフォントサイズをデフォルト値と異なるものにすることは可能ですか？たとえば、デフォルト：

-- Select Country --

サイズは7ptになります。およびオプションの1つ、

Georgia

サイズは13ポイントになります。

これは私のドロップダウンリストです。

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

私の JSFiddleのデモ も参照してください。

残念ながら、Firefoxでのみ機能します。他のブラウザが<option>要素のスタイリングをサポートしていない可能性がありますか？

私がテストしたブラウザ：

  • Chrome：バージョン27.0.1453.116 m
  • IE：10
  • Firefox：22.0
csscss3html-selectfont-size
16
user1128331

CSSクラスを<option>タグに追加してスタイルを設定します： http://jsfiddle.net/Ahreu/​​

現在、WebKitブラウザーは、仕様で定義されていないため、この動作をサポートしていません。これを見てください： selectタグのオプション要素をスタイルする方法？

14
Atropo

それは実行可能ですが、注意が必要です。

通常の選択ドロップダウンはスタイルを受け入れません。しかし。タグに「サイズ」パラメーターがある場合、ほとんどすべてのCSSが適用されます。このトリックを使用して、通常の選択タグと実質的に同等のフィドルを作成しました。さらに、視覚言語のComboBoxのように値を手動で編集できます（readonly入力タグ）。

したがって、背後にある原理を見るための最小限の例を示します。
（クリック機構にはjQueryが必要です）：

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
</div>

ここに、いくつかの（実際には多すぎる）スタイルのフィドルがあります。

https://jsfiddle.net/7ac9us70/1052/

（繰り返しますが、可能性を示すためにグラデーションと効果が詰め込まれています。つまり、放射状グラデーションに加えて、ジャンプとホバーアニメーションアイテムに放射状グラデーションを使用するように言っているわけではありません。 ）

<optgroup>タグは、通常はその下にあるオプションをカプセル化しないことに注意してください。はい、これは意図的なものであり、スタイリングのためのものです（マナーのある方法では、スタイル設定がはるかに少なくなります）。そして、はい、彼らはこのように完全にうまく機能します。

15
dkellner

オプション要素に13ptであることを伝えます

select option{
    font-size: 13pt;
}

そして、firstオプション要素は7pt

select option:first-child {
    font-size: 7pt;
}

デモの実行： http://jsfiddle.net/VggvD/1/

4
Andrea Ligios
select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}
0
Benito Esteban

このフィドルをチェックして、

上記のフィドルを編集しました

http://jsfiddle.net/narensrinivasans/FpNxn/1/

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}
0
Naren Srinivasan S