Styling option value in select drop down html not

2019-01-20 09:22发布

站内文章 / HTML/CSS
41 0 0

问题:

The css style for option value into the html drop down list not work on chrome and safari , work only on Firefox and IE.

some of code are out below:

<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 &lt;option&gt; 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:

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



回答4:

Please try to use this

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


回答5:

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



标签： html css html-select
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~