如何更改列表的字體大小（不是初始視圖）

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 。

鉻：

火狐：

Answer 1

我同意彼得，但是使用：

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

在CSS上將更改所有下拉字體，所以他應該使用類而不是總選擇

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>​

或者您可以直接在http://jsfiddle.net/sNkDW/上看到小提琴

Answer 2

在chrome嘗試添加background: white; 到班級選擇。 通過將背景設置為白色，Chrome也遵循我的其他規格，例如高度和字體。

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

Answer 3

我在Chrome上成功完成了這項工作。 以下是Google Fonts的自定義字體示例。

小提琴： 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-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');
}

編輯：

正如@Jhilom所指出的，如果您不希望這會影響您網站上的所有DropdDowns，請務必在Select中包含一個CSS類，如下所示：

HTML：

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

CSS：

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

Answer 4

看起來下拉列表正在由Mac OS X的“本機UI”呈現。

如果設置字體和/或大小實際上沒有改變任何東西，那么你無能為力。

（除了用自定義JavaScript版本替換<select> ）。

Answer 5

在Firefox中無法更改選項標記內的文本的CSS樣式。

在Firefox中：只有下拉組合框中的“selected”元素才會考慮您應用的任何CSS樣式。 樣式不會級聯到選項標簽。 為每個選項標記添加CSS樣式無效。

在Chrome中：Chrome尊重您添加到select和option標記的CSS樣式。 樣式不會從select標記向下級聯到選項標記，但您可以將樣式應用於每個選項標記。

我讀過“標准”不要求select和option標簽可以設置樣式。

Answer 6

我遇到了同樣的問題。 實際上這不是問題。 選擇菜單大小基於列表項文本長度顯示 。 檢查您的選項標簽

例如：如果選項標簽中有冗長的文本，則選擇菜單字體大小會很小。