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.

"How to apply style to option elements of select dropdown in angular js" - what does angular has to do with this, isn't this what css is for..?!! — T J
– T J, Commented Dec 17, 2015 at 9:06
Also on a side note, consider using ng-options to load your dropdown list instead of ng-repeating your options. — Jia Jian Goi
– Jia Jian Goi, Commented Dec 17, 2015 at 9:07
@DfrDkn select#mySelect, select#mySelect option { max-width:200px; } — yjs
– yjs, Commented Dec 17, 2015 at 9:09
@yjs.... select#mySelect, select#mySelect option { max-width:200px; } didnt work :( — DfrDkn
– DfrDkn, Commented Dec 17, 2015 at 9:12

Jia Jian Goi · Accepted Answer · 2015-12-17 09:18:14Z

4

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.

edited Dec 17, 2015 at 9:18

answered Dec 17, 2015 at 9:14

Jia Jian Goi

1,4233 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DfrDkn Over a year ago

So, is there any workaround to apply style to option elements ?

T J Over a year ago

@DfrDkn you should look into a plugin that creates dropdown using other elements

Jia Jian Goi Over a year ago

Yes, to an extent. As what @TJ mentioned, consider using plugins for that purpose.

Jia Jian Goi Over a year ago

@DfrDkn SelectBoxIt is an example of a plugin that allows you to style option elements. There are many others though. Hope it helps!

Mohamed Rihan · Accepted Answer · 2015-12-17 09:13:53Z

-1

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

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

answered Dec 17, 2015 at 9:13

Mohamed Rihan

1192 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related