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会在你点击打开下拉菜单时添加openclass，你可以用它来做一些你want.But注意的事情更改上面的样式是全局的，所以我建议你在它之前添加 parent class:

<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>

ui-select 焦点改变颜色不起作用

ui-select change color on focus doesn't work

angularjs

ui-select

angular-ui-select