设置ng无效的select2元素的样式

Question

一旦select2范围无效（并被触摸），我需要更改它的background-color。

这是模板代码：

      <div class="form-group col-md-2 pull-right">
        <label class="control-label" for="city">City</label>
          <select [disabled]="!properties.get('city').enabled" [(ngModel)]="properties.get('city').value" id="city" name="city" class="select2 form-control" [required]="properties.get('city').initialValue?.length > 0">
            <option *ngFor="let option of properties.get('city').options" value="{{option.id}}">{{option.text}}</option>
          </select>
      </div>

这是DOM：

以下CSS可以根据需要设置元素的样式，但是没有条件。

:host >>> span.select2-selection{
    background-color: #F1DEDE !important;
}

我认为主要是在理解如何将Shadow DOM选择器与CSS中的DOM选择器混合时遇到困难。 换句话说，我想根据赋予其同级DOM元素（span.select2-selection）的类来设置Shadow DOM元素（select.ng-invalid.ng-touched）

谢谢！

Answer 1

您可以使用以下CSS

  :host >>> .ng-invalid + .select2-selection{
       background-color: #F1DEDE !important;
    }

+查找位于同一父级中的下一个同级。

Answer 2

这是更改select2背景色或颜色的有效解决方案

$('select').select2();

$('.select2').click(function(){
  $('#select2-sel-results')
    .parent()
    .siblings('.select2-search')
    .css('background-color', 'red');
});

#sel + .select2 .select2-selection__rendered {  background-color: yellow; }

#select2-sel-results { background-color: grey; }

#select2-sel-results .select2-results__option--highlighted { background-color: aqua! important; }

#select2-sel-results .select2-results__option[aria-selected=true] { background-color: orange !important; }

.select2-search { background-color: orange; }

.select2-search input { background-color: white; }

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  <select id="sel" class="select2" style="width:50%">
    <option value="e1" >Element 1</option>
    <option value="e2" >Element 2</option>
    <option value="e3" >Element 3</option>
  </select>

此外，您可以直接提供CSS进行更改

input.ng-touched.ng-invalid {
            background-color:red;
        }

Answer 3

好的，总而言之，存在3个主要问题：

1. 我依赖的样式类基于DOM（<select>），而我要设置样式的元素位于Shadow DOM的同级元素内。 AFAIK用普通的CSS不可能做到这一点-导致我在TypeScript中解决了这个问题。
2. <select>元素ng类将在所有Select2事件-select2：select，select2：change，change（这意味着我必须绑定到其他东西或找到其他解决方案）之后进行更新
3. ng-touched根本没有更新-它永远保持“ ng-untouched”，这意味着我需要在第一次更改内对元素进行样式设置，而不必使用样式进行加载。

最终，我想出了这个可行的，丑陋的解决方案。我很想找到更好的东西，但是它可以用几行代码工作：

$('.select2').on('change.select2', function (e, data) {
    //Workaround for required fields styling
    let $select2Selection = $(this).next('span').find('.select2-selection'); 
    setTimeout(() => {
        if ($(this).hasClass('ng-invalid')){
            $select2Selection.css('background-color', '#F1DEDE');
        }
        else $select2Selection.css('background-color', '');
        }, 50); 
});