为< select>样式设置第一个选项iOS上的输入 [英] Styling the first option of a <select> input on iOS

问题描述

我试图在iOS上创建一个选择输入。第一个选项或初始状态应该具有较小的字体大小，但不包括其余的选项。

我有以下html结构：

 < select class =dropdown> 
< option selected =value =Navigation>导航< / option> 
< option value =some-link>无论< / option> 
< option value =some-link>另一个选项< / option> 
< option value =some-link>为什么< / option> 
< option value =some-link>什么< / 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％; 
显示：block; 
 margin-bottom：-1.5em; 
 
选项：not（：first-of-type）{
 font-size：1.5em; 
} 
} 
  

< select& 菜单看起来完全像我想要的样子。

但是当点击/点击选择在我的iphone的iOS的本机UI视图显示所有选项也在一个非常小的字体大小。

如何只使选择选项（或框本身）使用自定义格式， 。我想让我的选项有一个正常可读的字体大小。

有什么想法吗？我尝试使用选项：not（：first-of-type）并增加字体大小，但没有效果！

解决方案

不幸的是，没有办法。 iOS Safari 可完全控制样式选择列表的内部内容。以下是验证参考：小连结 。

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

这不太可取，但如果你绝对要求更改默认样式，那么恐怕这是唯一的方法;这里有一个演示，可以让您了解如何进行模拟：另一个小链接。 p>

I'm trying to style a select input on iOS. The first option or initial state should have smaller font-size but not the rest of the options.

I have the following html structure:

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

My CSS for it looks like this:

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

The <select> menu looks exactly like I want it to look. It says "Navigation" inside a light-gray box with a rather small font-size.

However when clicking/tapping the select on my iphone the native UI view of iOS shows all options also in a very small font-size.

How can I just make the selected option (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size.

Any ideas on that? I tried with option:not(:first-of-type) and increase the font-size but no effect!

解决方案

Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.

One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.

It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.

这篇关于为< select>样式设置第一个选项iOS上的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！