将CSS样式添加到IE中的选项

Question

I want to apply css style to option in select list.

It works perfect in mozilla firefox but does not apply in IE and chrome.

jsfiddle for IE

<select class="mapField">
   <option value="1">This is option 1 of select list</option>
   <option value="2">This is option 2 of select list</option>
   <option value="3">This is option 3 of select list</option>
</select>

<style>

select.mapField{
  width:120px;
}

.mapField option{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 100px;
}

</style>

Thanks in advance.

Answer 1

You can't. <option> is rendered by the OS, and not HTML. Except for background-color , color and border , style settings applied through the style object for the option element are ignored. You can probably search for plugins that look like <select> , but are actually HTML elements that can be styled.