HTML 选择下拉列表中的选项值样式在 Chrome 和 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12301729/
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 for option values in a HTML select drop-down doesn't work in Chrome & Safari
提问by user2183078
The inline CSS styling for an option value in a html drop-down list does not work on Chrome and Safari, but does seem to work in Firefox and IE.
html 下拉列表中选项值的内联 CSS 样式不适用于 Chrome 和 Safari，但似乎适用于 Firefox 和 IE。
Snippet of the HTML code:
HTML 代码片段：
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="project">Project</option>
回答by user2183078
colorstyle works fine in <option>elements on Windows 7 with current versions of Chrome, Safari, Firefox, IE, and Opera, as well as on Mac with Firefox; but appears to be a no-op on Mac with Chrome and Safari. Seems like a bug to me.
colorstyle 在<option>使用当前版本的 Chrome、Safari、Firefox、IE 和 Opera 的 Windows 7 元素以及使用 Firefox 的 Mac 上都可以正常工作；但在带有 Chrome 和 Safari 的 Mac 上似乎是无操作的。对我来说似乎是一个错误。
回答by Zoltan Toth
The short answer - you can not do that in Webkit based browsers. I.e. about paddingtake a look here
简短的回答——你不能在基于 Webkit 的浏览器中做到这一点。即约padding看看这里
To overcome your problem you can change your <select>to a list <ul>and style its' <li>items. That will work in every browser guaranteed.
为了解决您的问题，您可以将您<select>的列表更改为列表<ul>并为其设置样式<li>。这将适用于保证的每个浏览器。
回答by subindas pm
Please try to use this
请尝试使用这个
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
回答by Anil Singh
If you are looking for paddingworkaround:
如果您正在寻找padding解决方法：
- You can use
heightfor top and bottom. - For
padding-leftyou can usetext-indent.
- 您可以
height用于顶部和底部。 - 因为
padding-left您可以使用text-indent.
CSS:
CSS：
select {
height: 45px;
text-indent: 5px;
}
If you really need to use selectdropdown, otherwise you can use uland lielement as suggested by others.
如果您确实需要使用select下拉菜单，否则您可以按照其他人的建议使用ul和li元素。
回答by Willian Yamashita
try it
尝试一下
<!DOCTYPE html>
<html>
<body>
<form action="form_action.asp">
Select your favorite car:
<select name="carlist">
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit- appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="volvo">Volvo XC90</option>
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="saab">Saab 95</option>
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="mercedes">Mercedes SLK</option>
<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit" />
</form>
<p>Choose a car, and click the "Submit" button to send input to the server.</p>
</body>
</html>
as we can see in: http://www.w3schools.com/tags/att_option_value.asp
回答by amacy
I was able to replicate this in Chrome on jsfiddle. You can apply the styles to select, like this: http://jsfiddle.net/aaronmacy/3uv8D/
我能够在 jsfiddle 上的 Chrome 中复制这个。您可以将样式应用于select，如下所示：http: //jsfiddle.net/aaronmacy/3uv8D/
