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>

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

1 个答案: