UI select dropdown angular - Can't target first dropdown choice to add specific CSS

Question

I have a ui select dropdown in angular that contains various text values. Using CSS I added font awesome icons to the left of each value. I want to add a specific font awesome icon to the left of the 'All' choice in the dropdown, however I'm unable to target the specific dropdown choice. Not sure if this can be accomplished using only CSS or if I need to use JS to target it somehow. In any even any help would be greatly appreciated thank you.

screenshot

                <div class="form-group">
                    <ui-select id="teamMemberType" ng-model="historyCtrl.queryParams.teamMemberType" theme="bootstrap" ng-change="historyCtrl.filterContent()">
                        <ui-select-match placeholder="Search">{{$select.selected.display}}</ui-select-match>
                        <ui-select-choices group-by="'group'" repeat="option.value as option in (historyCtrl.filters.options.teamMemberType | filter: $select.search) track by option.value">
                            <span id="created" ng-bind-html="option.display| highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                </div>

is your ALL choice an option tag in your select?

Basilf
– Basilf

2017-05-08 18:41:10 +00:00
Commented May 8, 2017 at 18:41 — Basilf
– Basilf, Commented May 8, 2017 at 18:41

Colby Sargent · Accepted Answer · 2017-05-08 18:38:23Z

1

Without seeing the resulting HTML / CSS I don't know exactly how to apply this to your code, but there are multiple ways of targeting a single element with CSS using pseudo selectors. The one I expect you need is:

:first-child The first element among a group of sibling elements.

This will only select elements which are the first child of it's parent. Simply apply your CSS using this.

In other cases, if the position of your desired element is unknown, you could use ng-class to apply a class if the option equals a particular value. Then target the element with that class.

answered May 8, 2017 at 18:38

Colby Sargent

3312 silver badges6 bronze badges

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

Comments

Basilf · Accepted Answer · 2017-05-08 18:49:52Z

1

You can apply a specific style to the first item using this code:

 <ui-select-match placeholder="Search" ng-style="{{$index==0}} && {'background-color':'green'}">{{$select.selected.display}}</ui-select-match>

ng-class won't work for you as far as i know ui-select has a bug applying a class on the ui-select-match. So applying an inline style of the icon should work, by checking if the item index is =0

answered May 8, 2017 at 18:49

Basilf

4616 silver badges19 bronze badges

Collectives™ on Stack Overflow

UI select dropdown angular - Can't target first dropdown choice to add specific CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related