フォーカスで色を選択しても色が変わらない

Question

In this plunk私は複数の入力が可能なui-selectを持っています。私はborderの色を青に変更し、ui-selectが.font-control:focusを使ってフォーカスを取得したときに色を赤に変えようとしましたが、うまくいきません。何か案は？あなたが外タグ、divに置き換えui-selectを集中することはできない可能性があるためだ

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

：

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を。あなたが開くようにクリックしたときにui-selectがopenクラスを追加しますので

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

：あなたは全体のタグをクリックすると、境界線の色を変更したい場合は

、あなただけのスタイルのコード下記のように変更する必要がありますドロップダウンメニュー、あなたは道がグローバルであるので、私はその前に親クラスを追加するように提案します上記のスタイルを変更することがわかりwant.But何かをするためにそれを使用することができます：

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