Styling for option values in a HTML select drop-down doesn't work in Chrome & Safari

问题

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.

Snippet of the HTML code:

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

回答1:

color style 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.

回答2:

The short answer - you can not do that in Webkit based browsers. I.e. about padding take a look here

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.

回答3:

Please try to use this

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

回答4:

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

回答5:

If you are looking for padding workaround:

You can use height for top and bottom.
For padding-left you can use text-indent.

CSS:

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

If you really need to use select dropdown, otherwise you can use ul and li element as suggested by others.

回答6:

I was able to replicate this in Chrome on jsfiddle. You can apply the styles to select, like this: http://jsfiddle.net/aaronmacy/3uv8D/

来源：https://stackoverflow.com/questions/12301729/styling-for-option-values-in-a-html-select-drop-down-doesnt-work-in-chrome-sa

标签

html

css

html-select