Question

我为chrome中的下拉列表设置了字体大小，但它似乎没有更改<select>的大小

它适用于FF - 当我将字体大小设置为15px时，它显着更大

Answer 1

如果Chrome和Safari只是忽略您选择的高度， font-family 和 font-size CSS设置：添加border属性可以帮助Webkits尊重您的设置。

示例：

select {
 border: 1px solid #a4a4a4; /*Same grey as default appearance*/
 ( background: transparent; /*Would work too, but adds an ugly black border*/ )
 font-family: times; /*Now in webkit too*/
 font-size: 30px; /*Now in webkit too*/
}

Answer 2

另一种解决方法是使用<select>为-webkit-appearance: menulist-button;元素设置样式。

select { -webkit-appearance: menulist-button; font-size: 25px; }

<select>
    <option>A</option>
    <option>BB</option>
    <option>CCC</option>
</select>

Answer 3

某些浏览器允许您自行修改font-size，有些则不允许。

您可以通过设置select样式 hack border元素的浏览器特定样式。

select {
  border: 1px solid #ccc;
  font-size: 2em;
}

<select>
    <option>Quick</option>
    <option>Brown</option>
    <option>Fox</option>
</select>

在chrome中设置下拉列表的字体大小似乎不会影响样式

3 个答案: