CODEWITHSUNDEEP
htmlcsshtml-select
user1483059
user1483059

Reputation:

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>

Upvotes: 9

Views: 82428

Answers (6)

user2183078
user2183078

Reputation: 562

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.

Upvotes: 18

Anil Singh
Anil Singh

Reputation: 4501

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.

Upvotes: 0

subindas pm
subindas pm

Reputation: 2774

Please try to use this

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

Upvotes: 2

Willian Yamashita
Willian Yamashita

Reputation: 33

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

Upvotes: 0

amacy
amacy

Reputation: 280

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

Upvotes: -1

Zoltan Toth
Zoltan Toth

Reputation: 47667

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.

Upvotes: 7

Related Questions