CSS 在 iOS 上设计 <select> 输入的第一个选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12651507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling the first option of a <select> input on iOS
提问by matt
I'm trying to style a selectinput on iOS. The first option or initial state should have smaller font-size but not the rest of the options.
我正在尝试select在 iOS 上设置输入样式。第一个选项或初始状态应该具有较小的字体大小，但其余选项不应该。
I have the following html structure:
我有以下 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>
My CSS for it looks like this:
我的 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;
}
}
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.
该<select>菜单长相酷似我希望它看起来。它在一个带有相当小的字体大小的浅灰色框中显示“导航”。
However when clicking/tapping the selecton my iphone the native UI view of iOS shows all options also in a very small font-size.
但是，当select在我的 iphone 上单击/点击 时，iOS 的本机 UI 视图也会以非常小的字体大小显示所有选项。
How can I just make the selectedoption (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size.
我怎样才能让selected选项（或框本身）使用自定义格式而不是选项。我希望我的选项具有“正常”可读的字体大小。
Any ideas on that? I tried with option:not(:first-of-type)and increase the font-size but no effect!
对此有何想法？我试过option:not(:first-of-type)并增加字体大小但没有效果！
回答by Chris
Unfortunately, there isn't a way to do it. iOS Safaritakes full control of styling selectlists' internal contents. Here's a reference for verification: little link.
不幸的是，没有办法做到这一点。iOS Safari完全控制样式select列表的内部内容。这是验证的参考：小链接。
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
实现此目的的一种方法是使用 JavaScript 模拟下拉/选择菜单。
It's not very preferable, but if you absolutelyrequire 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.
这不是很可取，但是如果您绝对需要更改默认样式，那么恐怕这是唯一的方法；这是一个演示，可以让您了解如何进行模拟：另一个小链接。
回答by user339884
Try this 100% worked for me
试试这个 100% 对我有用
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
回答by domdambrogia
For what it's worth - I had a transparent <select>dropdown with a border radius when closed. On iOS (I'm not sure about android, I didn't test it) the default grey box for the <select>would appear inside of my custom border which was unappealing and unwanted.
对于它的价值 - 我<select>在关闭时有一个带有边框半径的透明下拉菜单。在 iOS 上（我不确定 android，我没有测试它）默认的灰色框<select>会出现在我的自定义边框内，这既不吸引人又不受欢迎。
To get rid of the inner grey box I used the following CSS:
为了摆脱内部灰色框，我使用了以下 CSS：
-webkit-appearance: none;
And further more - pertaining to this OP's topic. Bootstrap offers a convenient solution with great documentation to enable custom dropdowns with Javascript. Check it out here.
还有更多 - 与这个 OP 的主题有关。Bootstrap 提供了一个方便的解决方案，其中包含大量文档，可以使用 Javascript 启用自定义下拉列表。在这里查看。
