Styling option value in select drop down html not

2019-01-20 08:36发布

站内问答 / HTML/CSS
531 5 5

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>

5条回答
Bombasti
2楼-- · 2019-01-20 09:15

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

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2019-01-20 09:19

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.

查看更多
0人赞 添加讨论(0) 举报
趁早两清
4楼-- · 2019-01-20 09:28

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.

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2019-01-20 09:37

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

查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
6楼-- · 2019-01-20 09:37

Please try to use this

select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)