Question

所以，基本上我用

关闭了原生选择框样式

-webkit-appearance: none;

所以我可以拥有自己的插入符号。

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

类似的东西：

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

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

我似乎无法使其工作...无论我做什么......两者似乎都是连接的，我不能仅仅为选项改变大小而不影响选择框本身（当它关闭时要清楚）

Answer 1

使用以下代码确保appearance适用于每个浏览器。

这适用于IE（类似于appearance:none）：

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

（在Chrome，Firefox，Safari中测试）

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: