How to apply style to option elements of select dropdown in angular js?

Question

I have a select element in HTML and it has a ng-repeat attribute of angular js to render the options available as shown in below code snippet -

<select id="mySelect" ng-model="dummyModel" ng-init="dummyModel=0"                
                           ng-disabled="false" style="width:200px;">
                                <option value="0">--Select--</option>
                                <option ng-repeat="elem in list"
                                        value="{{elem.id}}">
                                    {{elem.description}}
                                </option>
                            </select>

I am able to set the width of select dropdown by using "style" attribute. But, I am unable to apply style to option elements. I want to set fixed width of 200 px for all option elements also. How can I do this ? Any suggestions are highly appreciated.

Note : I have already tried using CSS class as below,but it did not work :(

#mySelect*
{
 width:200px;
}

Also, I tried using ng-style="myOptionStyle() attribute on option tag as below, but that didnt work as well :(

<option ng-repeat="elem in list" value="{{elem.id}}"  
        ng-style="myOptionStyle()>
                      {{elem.description}}
</option>

and in angular js controller -

 $scope.myOptionStyle = function () {
                return { 'width': '200px;' };
            };

Thanks in advance.

Answer 1

Unfortunately, it is not possible. The OS is the one rendering the <option> element and not HTML, so it's more of OS-dependent.

Here is an extract from MSDN :

Except for background-color and color , style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

Answer 2

to style HTML elements that have specific attributes or attribute values.

option[value] { background-color: yellow; }