Стиль, выбранный при использовании окна

Question

Я пытаюсь создать собственный список вариантов раскрывающегося списка, используя тег <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

Answer 1

попробовать что-то вроде:

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

это будет предназначаться для выбора опции тэг, который имеет атрибут selected, примененных к нему. Он не будет, если вы откроете раскрывающийся список и выберите что-то еще, настройте этот тег параметра. Если вы ищете это, вам, вероятно, придется прибегнуть к JS и добавить класс CSS к выбранному тегу.

Styling <option> теги довольно ограничены, поэтому не удивляйтесь, если вы не можете делать все, что хотели бы сделать.