Question

html下拉列表中的选项值的css样式不适用于chrome和safari，仅适用于Firefox和IE。

以下是一些代码：

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

Answer 1

使用当前版本的Chrome，Safari，Firefox，IE和Opera，以及使用Firefox的Mac，

color样式在Windows 7上的<option>元素中运行良好;但在Mac上使用Chrome和Safari似乎是无操作。对我来说似乎是一个错误。

Answer 2

简短的回答 - 你不能在基于Webkit的浏览器中这样做。即大约padding看看here

要解决您的问题，您可以将<select>更改为列表<ul>并设置其<li>项的样式。这将适用于所有保证的浏览器。

Answer 3

请尝试使用此

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

Answer 4

试试吧

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

我们可以看到： http://www.w3schools.com/tags/att_option_value.asp

Answer 5

如果您正在寻找padding的解决方法：

您可以在顶部和底部使用height。
对于padding-left，您可以使用text-indent。

CSS：

select {
    height: 45px;
    text-indent: 5px;
}

如果您确实需要使用select下拉菜单，则可以使用其他人建议的ul和li元素。

Answer 6

我能够在jsfiddle上的Chrome中复制这个。您可以将样式应用于select，如下所示：http://jsfiddle.net/aaronmacy/3uv8D/

选择下拉列表中的样式选项值不适用于Chrome＆amp;苹果浏览器

6 个答案: