How to customize group label in Angular UI-Select

Question

In Angular ui-select (GitHub Link), how can I customize group label?

As shown in the image, the list is grouped by country, how can I customize the group label so to make it larger then the selection items?

Plunker Example

<ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
  <div ng-bind-html="person.name | highlight: $select.search"></div>
  <small>
    email: {{person.email}}
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
  </small>
</ui-select-choices>
</ui-select>

The example is modified from the official example link.

Thanks in advance.

Answer 1

I simply targeted the CSS class that was bound to the group by label as follow:

.ui-select-choices-group-label {
  font-size: 20px;
}

You can see the updated Plunkr here

Answer 2

We had similar need, but we did not want to change this style for all groups.

So here is the solution we found:

Add class biggerGroup to your ui-select-choices like in this example:

<ui-select-choices class="biggerGroup" group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">

Add this in your .css file:

.biggerGroup > .ui-select-choices-group > .ui-select-choices-group-label {
    font-size: 20px;
}

Now, if you need to change group styling in your selection, just add this biggerGroup class and voila.

I hope it may help someone.