Question

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

我有以下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>菜单看起来与我希望它看起来完全一样。它在“浅灰色”框内显示“导航”，字体大小相当小。

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

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

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

Answer 1

不幸的是，没有办法做到这一点。 iOS Safari 可以完全控制样式select列表的内部内容。以下是验证参考：little link。

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

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

Answer 2

尝试这100％为我工作

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

Answer 3

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

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

-webkit-appearance: none;

还有更多 - 与本OP的主题有关。 Bootstrap提供了一个方便的解决方案，提供了很好的文档，可以使用Javascript启用自定义下拉菜单Check it out here.

在iOS上选择<select>输入的第一个选项</select>

3 个答案: