ui选择更改对焦颜色不起作用

Question

In this plunk我有一个允许多个条目的ui选择。我将border颜色更改为蓝色，并尝试使用.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>