使用方框時選擇的樣式選項

-1

我試圖使用<select>標籤進行自定義的下拉選項列表。我希望所選選項的字體大小大於列表中的選項。使用方框時選擇的樣式選項

我將font-size屬性添加到我的選擇菜單中，但它也將它應用於列表中的所有選項，這使列表不可用。

HTML

<h1> 
    All houses located at 
    <select id="allhouses__dropdown"> 
</h1> 
    <option value=""><a>Alle</a></option> 
    <option value=".tilburg" selected><a>Tilburg</h1></a></option> 
    <option value=".amsterdam"><a>Amsterdam</a></option> 
    <option value=".breda"><a>Breda</a></option> 
    <option value=".delft"><a>Delft</a></option> 
    <option value=".den-haag"><a>Den Haag</a></option> 
    <option value=".eindhoven"><a>Eindhoven</a></option> 
    <option value=".enschede"><a>Enschede</a></option> 
    <option value=".groningen"><a>Groningen</a></option> 
    <option value=".leiden"><a>Leiden</a></option> 
    <option value=".maastricht"><a>Maastricht</a></option> 
    <option value=".nijmegen"><a>Nijmegen</a></option> 
    <option value=".utrecht"><a>Utrecht</a></option> 
    <option value=".rotterdam"><a>Rotterdam</a></option> 
    <option value=".wageningen"><a>Wageningen</a></option> 
    <option value=".zwolle"><a>Zwolle</a></option> 
</select>

CSS

#allhouses__dropdown { 
    background: transparent; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    border: none; 
    outline: none; 
    font-weight: 600; 
    font-size: 2rem !important; 
    color: red; 
}

是否有字體大小的造型只適用於所選擇的選項的方法嗎？解決方案包括jQuery，但只有在必要時。

我做了一個codepen，顯示我的問題：http://codepen.io/sanderfish/pen/jWpbrv

來源

2016-02-01 Sanderfish

請直接在問題中發佈所有相關代碼。 –

什麼是'$原色'？ – j08691

添加了所有相關的代碼。我無法獲得可能重複工作的解決方案。已經嘗試過了。 – Sanderfish

試着這麼做：

option[selected] { 
    font-size: 3em; 
    color: blue; 
}

這將針對已應用到它selected屬性的選擇選項標籤。它不會，如果您打開下拉菜單並選擇了其他內容，請選擇該選項標籤。如果你想要發生這種情況，你可能不得不求助於JS，並添加一個CSS類到選定的選項標籤。

造型<option>標籤相當有限，所以不要驚訝，如果你不能做你想做的一切。

來源

2016-02-01 16:42:03 hungerstar

這可能會起作用 - 但正如hungerstar所說，選項的風格非常有限。我敢打賭，你不能做你想做的。相反，你應該設置一個完全自定義的選擇框使用HTML和jQuery（不完全是你想聽到我確定）。 –

使用方框時選擇的樣式選項

回答

相關問題