9

html 下拉列表中选项值的内联 CSS 样式不适用于 Chrome 和 Safari，但似乎适用于 Firefox 和 IE。

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

6 回答 6

18

color样式在<option>带有当前版本的 Chrome、Safari、Firefox、IE 和 Opera 的 Windows 7 以及带有 Firefox 的 Mac 上的元素中运行良好；但在带有 Chrome 和 Safari 的 Mac 上似乎是无操作的。对我来说似乎是一个错误。

于 2013-07-25T12:14:03.473 回答
7

简短的回答——你不能在基于 Webkit 的浏览器中这样做。即padding看看这里

为了克服您的问题，您可以将您的问题更改<select>为列表<ul>并设置其项目的样式<li>。这将保证在每个浏览器中都有效。

于 2012-09-06T14:12:35.940 回答
2

请尝试使用这个

select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
于 2017-05-24T11:22:59.993 回答
0

尝试一下

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

于 2012-09-06T14:36:22.810 回答
0

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

  • 您可以height用于顶部和底部。
  • 因为padding-left你可以使用text-indent.

CSS：

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

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

于 2019-07-19T23:52:40.090 回答
-1

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

于 2012-09-06T14:12:27.833 回答