html - CSS:更改选择-选项字体大小，如果外观:无

Question

所以，基本上我用

关闭了 native 选择框样式

-webkit-appearance: none;

这样我就可以拥有自己的插入符号图标。

现在，我想要完成的是具有一种尺寸的选择框 和具有更大字体大小的选项

类似于:

select.micro{
    font-size: 12px;
}

select.micro option{
    font-size: 16px;
}

我似乎无法让它工作......无论我做什么......两者似乎都已连接并且我无法在不影响选择框本身的情况下仅为选项更改大小(当它关闭时清楚)

Answer 1

使用以下代码确保外观适用于所有浏览器。

这是针对 IE 的(类似于 appearance:none ):

select::-ms-expand {
display: none;
}

(在 Chrome、Firefox、Safari 中测试)

如果仍然不起作用，请在 select.micro option { font-size:16px!important} 上使用 !important。我只推荐它作为最后的手段。

select { 
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:none;
}
select::-ms-expand {
    display: none;
}

select.micro {
  font-size: 12px;
}

select.micro option {
  font-size: 16px;
}

<select class="micro">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>