リストのフォントサイズを変更する方法（初期表示ではない）

Question

ドロップダウンリストの最初の表示にカスタムフォントと背景を設定しました（選択肢を選択してください）。 font-sizeは20ピクセルで、カスタムフォントでうまく見えます。しかし、リストをクリックすると、オプションそのものがカスタムフォントを使用せず、通常のように見えます（font-sizeは例外ではありません）。これはChromeの場合のみであるようです（SafariとFirefoxもテスト済みです）。

@font-face { 
 
    font-family: 'Averia Libre'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'), 
 
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff'); 
 
} 
 
select { 
 
    font-size: 20px; 
 
    font-family: 'Averia Libre', cursive; 
 
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x; 
 
    width: 400px; 
 
    font-family: 'Averia Libre'; 
 
}

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'> 
 
<select> 
 
    <option value="">I'm a custom font.</option> 
 
    <option value="">Hey me too!</option> 
 
    <option value="">Averia Libre</option> 
 
</select>

私はオプション自身のために別のクラスを作成してみましたが、それは何の影響も与えていないようでした。

さらに詳しく説明すると、JSFiddleです。

クローム：

Firefoxの：私はChromeで成功し、これをやった

Answer 1

。ここでは、Googleフォントによるカスタムフォントの例を示します。

フィドル：http://jsfiddle.net/simple/wpHKe/

HTMLコード、あなたのように：もちろん

<select> 
<option value="">I'm a custom font.</option> 
<option value="">Hey me too!</option> 
<option value="">Averia Libre</option> 
</select>​ 

、CSS：

select { 
    font-size: 20px; 
    font-family: 'Averia Libre', cursive; 
}​ 

とフォントフェイスきますGoogleから：

これは外部スタイルシートとしてリンクされていますが、これはその内部のコードです。

@font-face { 
    font-family: 'Averia Libre'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'), 
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff'); 
} 

編集：あなたが選択するためのCSSクラスを含めるようにしてください、これはあなたのサイト上のすべてのDropdDownsに影響を与えたくない場合は

としては、@Jhilomによって指摘そのような：

HTML：

<select class="yourSelectClass"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

CSS：

.yourSelectClass 
{ 
/* Your Dropdown CSS here */ 
} 

Answer 2

私はピーターと合意したが、の使用による午前：彼は代わりに、合計のクラスを使用する必要がありますので、CSSの

select { 
    font-size: 20px; 
    font-family: 'Averia Libre', cursive; 
} 

は

CSS

を選択し、ドロップダウンフォントのすべてを変更します

.selectClass { 
    font-size: 25px; 
    font-family: 'Impact', cursive; 
}​ 

そしてHTML

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'> 

<select class="selectClass"> 
<option value="">I'm a custom font.</option> 
<option value="">Hey me too!</option> 
<option value="">Averia Libre</option> 
</select>​ 

それとも、フォントおよび/またはサイズを設定する場合は、ドロップダウンリストは、Mac OS Xの

の「ネイティブUI」でレンダリングされているように見えます http://jsfiddle.net/sNkDW/

Answer 3

に直接フィドルを見ることができます実際には何も変わっていません。それについて何もできません。

（<select>をcustom JavaScript versionに置き換えた以外は）

Answer 4

クロムでをクラスセレクトに追加してみてください。バックグラウンドを白に設定することで、Chromeの高さやフォントなどの残りの仕様にも従いました。

.yourselectclass select { 
    background: white; 
    font-size: 16px; 
    margin-left: 5px; 
    font-family: 'Cabin', sans-serif; 
    height: 30px; 
    width: 88px; 
} 

Answer 5

Firefoxでオプションタグ内のテキストのCSSスタイルを変更することはできません。

Firefoxの場合： ドロップダウンコンボボックスの「選択済み」要素は、適用するCSSスタイルを尊重します。スタイルはオプションタグまでカスケードしません。各オプションタグにCSSスタイルを追加しても効果はありません。

Chromeの場合： Chromeは、選択タグとオプションタグに追加するCSSスタイルを尊重します。スタイルはselectタグからoptionタグまでカスケードしませんが、各optionタグにスタイルを適用できます。

「標準」では、選択可能なタグとオプションタグをスタイル付けする必要はありません。

Answer 6

私は同じ問題に直面しています。実際には問題ではありません。選択メニューのサイズは、リスト項目のテキストの長さに基づいて表示されます。オプションラベルを確認してください

例：オプションタグに長いテキストがある場合、選択メニューのフォントサイズは小さくなります。