ui-select 在焦点上更改颜色不起作用

Question

In this plunk 我有一个允许多个条目的 ui-select。我将border 颜色更改为蓝色，并尝试在ui-select 使用.font-control:focus 获得焦点时将颜色更改为红色，但这不起作用。有什么想法吗？

HTML

  <style>
    .form-control {
      border-color: blue;
    }
    .form-control:focus {
      border-color: red;
    }
  </style>

    <br/><br/>
      <ui-select multiple tagging tagging-label="(custom 'new' label)" 
          ng-model="multipleDemo.colors" sortable="true" 
           style="width: 300px;" title="Choose a color">
            <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
            <ui-select-choices repeat="color in availableColors | filter:$select.search">
              {{color}}
            </ui-select-choices>
       </ui-select>

Javascript：

var app = angular.module('demo', ['ngSanitize', 'ui.select']);
app.controller('ctl', function ($scope) {

      $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta',
                                 'Maroon','Umbra','Turquoise'];

      $scope.multipleDemo = {};
      $scope.multipleDemo.colors = ['Blue','Red'];


});

Answer 1

那是因为你无法关注外部标签，ui-select 被 div 替换。

如果你想改变点击整个标签时的边框颜色，你只需要修改样式代码如下：

.ui-select-multiple.ui-select-bootstrap {
    border: 1px solid blue;
}
body > .ui-select-bootstrap.open {
    border: 1px solid red;
}

因为ui-select会在你点击打开下拉菜单时添加open类，你可以用它来做你想做的事情。但是注意上面改变样式的方式是全局的，所以我建议你在它之前添加父类：

<style>
    .your-custom-class .ui-select-multiple.ui-select-bootstrap {
        border: 1px solid blue;
    }
    .your-custom-class > .ui-select-bootstrap.open {
        border: 1px solid red;
    }
</style>

<div class="your-custom-class">
    <ui-select multiple tagging tagging-label="(custom 'new' label)" 
              ng-model="multipleDemo.colors" sortable="true" 
               style="width: 300px;" title="Choose a color">
        <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
         <ui-select-choices repeat="color in availableColors | filter:$select.search">
              {{color}}
        </ui-select-choices>
    </ui-select>
</div>