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

Question

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>

provide some more code and elaborate the problem What exactly do you mean by "Does not work" ? — Ankit, Sep 06 '12 at 14:02
take look for the url below on firefox and on chrome and see the difference: http://64.202.124.112/~cedro/en/ENERGY-EFFICIENCY/Internal-Lighting/Bassil-Fleihan-Institute (look on the drop down menu in the right : projects navigation) — , Sep 06 '12 at 14:03

score 18 · Accepted Answer · edited Jul 20 '19 at 01:08

18

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.

edited Jul 20 '19 at 01:08

ArendE

957
1
8
14

answered Jul 25 '13 at 12:14

user2183078

562
6
11

score 7 · Answer 2 · edited May 23 '17 at 12:26

7

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.

edited May 23 '17 at 12:26

Community

1
1

answered Sep 06 '12 at 14:12

Zoltan Toth

46,981
12
120
134

Well... it is an idea... but how to make
s to show and hide on

ElPiter

Nov 24 '12 at 11:50

@ElPiter you can use some minimal JS/jQuery for that – Zoltan Toth Nov 24 '12 at 11:57

@ZoltanToth, good piece of advice. That is what I finally did and I think it had a nice looking :) – ElPiter Nov 26 '12 at 10:33

This is a great method, but you do lose the ability to select by typing and tabing between fields. – kwelch Jul 24 '15 at 17:15

So basically it looks like NOT using ` – Mick Belker - Pseudonym Feb 25 '19 at 07:50

score 2 · Answer 3 · answered May 24 '17 at 11:22

2

Please try to use this

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

answered May 24 '17 at 11:22

subindas pm

2,668
25
18

This will hide the arrow from the dropdown, making GUI non-user-friendly... – Mick Belker - Pseudonym Mar 19 '18 at 17:44
1

Ok we can add the arrows by using CSS after before property – subindas pm Feb 22 '19 at 04:55

score 0 · Answer 4 · answered Sep 06 '12 at 14:36

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

Thank you. , on Chrome Browser, Just taken the background css , not the border issue. — , Sep 21 '12 at 07:23

score 0 · Answer 5 · answered Jul 19 '19 at 23:52

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.

amacy · Answer 6 · 2012-09-06T14:28:09.437

-1

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

edited Sep 06 '12 at 14:28

answered Sep 06 '12 at 14:12

amacy

280
6
14

@MouhamadOunayssi-DIGITALITS Maybe I'm misunderstanding you. I just added an example to my answer. Is that what you're trying to accomplish? – amacy Sep 06 '12 at 14:30
Thank u for your replay , i understand your example, my problem was on the option tag into the select tag – Sep 21 '12 at 07:19

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

6 Answers6

Linked

Related