在iOS上设置输入的第一个选项样式

我正在尝试在iOS上设置select输入的样式。 第一个选项或初始状态应具有较小的字体大小，但不应包含其余选项。

我有以下html结构：

  Navigation Whatever Another option Why What  

我的CSS看起来像这样：

 select { -webkit-appearance: none; font-family: 'Custom-Font', sans-serif; font-size:.5em line-height:1.8em; // optical center background-color: #ccc; color: #333; border: none; padding: 6px 10px 4px 10px; } .dropdown { background-image: url(img/assets.svg); background-position: right 2px; background-repeat: no-repeat; width: 100%; display:block; margin-bottom:-1.5em; option:not(:first-of-type) { font-size:1.5em; } } 

菜单看起来与我希望它看起来完全一样。 它在一个浅灰色的盒子里面写着“导航”，字体大小相当小。

但是，当点击/点击我的iphone上的select时，iOS的原生UI视图也会以非常小的字体大小显示所有选项。

如何使selected选项（或框本身）使用自定义格式而不是选项。 我希望我的选项具有“正常”可读字体大小。

有什么想法吗？ 我尝试使用option:not(:first-of-type)并增加字体大小但没有效果！

Answer 1

不幸的是，没有办法做到这一点。 iOS Safari完全控制样式select列表的内部内容。 这是validation的参考： 小链接 。

实现此目的的一种方法是使用JavaScript模拟下拉/选择菜单。

这不是很好，但如果你绝对需要更改默认样式，那么我担心这是唯一的出路; 这是一个演示，可以让你了解如何进行模拟： 另一个小链接 。

Answer 2

对于它的价值 – 我关闭时有一个带有边框半径的透明下拉列表。 在iOS上（我不确定android，我没有测试它） 的默认灰色框会出现在我的自定义边框内部，这是没有吸引力和不需要的。

为了摆脱内部的灰色框，我使用了以下CSS：

 -webkit-appearance: none; 

还有更多 – 与OP的主题有关。 Bootstrap提供了一个方便的解决方案，提供了很好的文档，可以使用Javascript启用自定义下拉菜单 看看这里。

Answer 3

尝试这100％为我工作

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }