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

Question

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

我有以下html结构:

<select class="dropdown">
    <option selected="" value="Navigation">Navigation</option>
    <option value="some-link">Whatever</option>
    <option value="some-link">Another option</option>
    <option value="some-link">Why</option>
    <option value="some-link">What</option>
</select>

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

该<select>菜单长相酷似我希望它看起来.它在一个浅灰色的盒子里面写着"导航",字体大小相当小.

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

如何使selected选项(或框本身)使用自定义格式而不是选项.我希望我的选项具有"正常"可读字体大小.

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

Answer 1

不幸的是,没有办法做到这一点.iOS Safari完全控制样式select列表的内部内容.这是验证的参考:小链接.

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

这不是很好,但如果你绝对需要改变默认样式,那么恐怕这是唯一的出路; 这是一个演示,应该让你知道如何进行模拟:另一个小链接.