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，但仅在必要时。

我制作了一个显示我的问题的代码：http://codepen.io/sanderfish/pen/jWpbrv

Answer 1

尝试类似：

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

这将定位应用了selected属性的select选项标记。如果您打开下拉列表并选择其他内容，则不会设置该选项标记的样式。如果您正在寻找这种情况，您可能不得不求助于JS并在选定的选项标签中添加CSS类。

样式<option>标签相当有限，所以如果你不能做你想做的所有事情，不要感到惊讶。

使用框时选择样式选项

1 个答案: