選擇選項字體大小

我已經建立this fiddle爲我做的一個例子。選擇選項字體大小

我所試圖做的Firefox中正常工作。當您打開選擇選項時，字體大小爲14px。

然而，在谷歌瀏覽器中查看它會選擇繼承的字體大小34px。

我理想的選擇是選擇字體大小14px。

這可能嗎？

我願意在任何jQuery的相關修復程序，應符合規定。

感謝

上市下面

代碼......

我CSS是：

.styled-select { 
    overflow: hidden; 
    height: 74px; 
    float: left; 
    width: 365px; 
    margin-right: 10px; 
    background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c; 
} 

.styled-select select { 
    font-size: 34px; 
    border-radius: 0; 
    border: none; 
    background: transparent; 
    width: 380px; 
    overflow: hidden; 
    padding-top: 15px; 
    height: 70px; 
    text-indent: 10px; 
    color: #ffffff; 
    -webkit-appearance: none; 
} 

.styled-select option.service-small { 
    font-size: 14px; 
    padding: 5px; 
    background: #5c5c5c; 
}

HTML標記：

<div class="styled-select"> 
    <select class="service-area" name="service-area"> 
     <option selected="selected" class="service-small">Service area?</option> 
     <option class="service-small">Volunteering</option> 
     <option class="service-small">Partnership &amp; Support</option> 
     <option class="service-small">Business Services</option> 
    </select> 
</div>

來源

2013-04-05 StuBlackett

的可能的複製[？如何風格選擇標籤的選項元素（http://stackoverflow.com/questions/5887133/how-to -style-a-select-tags-option-element） – TylerH 2015-11-29 23:40:33

一種解決方案可能去w說唱內optgroup選項：

HTML：

<optgroup> 
    <option selected="selected" class="service-small">Service area?</option> 
    <option class="service-small">Volunteering</option> 
    <option class="service-small">Partnership &amp; Support</option> 
    <option class="service-small">Business Services</option> 
</optgroup>

CSS：

optgroup { font-size:14px; }

來源

2013-04-05 09:20:49 lifetimes

太棒了。可能是我的下一個想法。感謝那 – StuBlackett 2013-04-05 09:27:36

只適用於FF – 2013-08-23 00:25:56

它在Chrome（v28我相信），Safari，IE等當時工作。我將不得不嘗試找出它的錯誤報告是 – lifetimes 2015-04-23 21:58:33

.service-small option { 
    font-size: 14px; 
    padding: 5px; 
    background: #5c5c5c; 
}

我想這是因爲你用過.styled選在類的開始碼。

來源

2013-04-05 09:22:29 ExCluSiv3

與HTML中的大多數表單控件一樣，將CSS應用於<select>和<option>元素的結果在瀏覽器之間差異很大。 Chrome瀏覽器不會讓您直接將字體樣式應用於<option>元素---如果您對其執行檢查元素，則會看到font-size: 14px聲明被越過，就好像它已被覆蓋級聯，但實際上是因爲Chrome無視它。

不過，Chrome的將讓你應用字體樣式的<optgroup> element，這樣就實現你願意，你可以包裝在<optgroup>所有<option>秒，然後運用你的字體樣式到選擇的結果。如果你想要optgroup sans-label，你可能不得不做一些聰明的CSS來定位或者在頂部顯示標籤的地方隱藏白色區域，但這應該是可能的。

分叉到一個新的jsfiddle向你展示我的意思：

http://jsfiddle.net/zRtbZ/

來源

2013-04-05 09:35:38

您試圖在風格選改變選項的字體。你需要改變的是選項的字體在選擇在風格選擇。

.styled-select select > option.service-small{ 
    font-size: 34px; 
    border-radius: 0; 
    border: none; 
    background: transparent; 
    width: 380px; 
    overflow: hidden; 
    padding-top: 15px; 
    height: 70px; 
    text-indent: 10px; 
    color: #ffffff; 
    -webkit-appearance: none; 
}

來源

2015-06-19 05:39:08