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

我爲下拉列表的初始視圖（選擇了一個選項）設置了自定義字體和背景。該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。

鉻：

enter image description here

火狐：

enter image description here

來源

2012-05-10 domino

你可以包括一些CSS來幫助解答這個請。 – frontendzzzguy

@trickeedickee http://jsfiddle.net/bumpy009/wpHKe/7/ – domino

這真的很奇怪。到目前爲止，對於正在審查您的問題的三個人來說，它可以正常工作，但問題可能在您身上。但我不知道爲什麼。如果有人沒有看到自定義字體，很想聽聽。 – Peter

我已經在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; 
}

與字體自帶來自谷歌：

你可以看到這個鏈接爲外部樣式表，但這是它內部的代碼。

@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您的網站，一定要包括CSS類選擇做，像這樣：

HTML：

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

CSS：

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

來源

2012-05-10 21:52:27 Peter

我編輯了一下你的代碼：http://jsfiddle.net/bumpy009/wpHKe/7/它的確在Chrome中看起來很大...... – domino

你也可以編輯我的文章。 – Peter

實際的下拉菜單確實有一個類。 – domino

我與彼得而是通過採用商定：在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>

或者，你可以直接看到在 http://jsfiddle.net/sNkDW/

來源

2012-05-10 22:12:50 Jhilom

謝謝你的評論，但這是** demo **的原因。這些小細節和澄清不值得一個完整的新職位。 – Peter

在實際的代碼中，我確實使用了一個類。我在jsfiddle中看不到自定義字體。 – domino

@domino，你可以使用任何字體。我只是舉了一個字體「影響」的例子 – Jhilom

它看起來像下拉列表是由Mac OS X的

的「原生UI」渲染如果設置字體和/或大小的小提琴實際上並沒有改變任何東西，你無能爲力。

（不是用custom JavaScript version代替<select>）。

來源

2012-05-10 22:52:44 thirtydot

字體大小確實改變了，但它不應該影響列表本身。在鉻它確實。我會查看js版本，謝謝。 – domino

也許它不應該影響列表本身，但不幸的是沒有辦法改變它:(*（除了使用JavaScript替換）* – thirtydot

這對我有幫助：http://css-tricks.com/dropdown-默認的造型/ – Ryan

在chrome中嘗試將background: white;添加到類Select中。通過設置背景爲白色，Chrome也遵循我的其他規範，如高度和字體。

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

來源

2015-05-05 13:46:46 tylerSF

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

在Firefox中：只有下拉組合框中的「selected」元素會遵循您應用的任何CSS樣式。樣式不會級聯到選項標籤。爲每個選項標籤添加CSS樣式不起作用。

Chrome： Chrome尊重您添加到選擇標籤和選項標籤的CSS樣式。樣式不會從選擇標籤級聯到選項標籤，但可以將樣式應用於每個選項標籤。

我讀過「標準」不需要select和option標籤是可風化的。

來源

2016-09-20 16:56:09

我面臨同樣的問題。其實它不是一個問題。選擇菜單大小基於列表項文本長度出現。檢查您的選項標籤

例如：如果您在選項標籤中有冗長的文本，那麼選擇菜單的字體大小將會很小。

來源

2017-02-15 04:20:48 Lini

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

回答

相關問題