输入焦点时更改标签颜色

Question

我需要当焦点在输入中时，标签会改变颜色，但是，在我的结构中不起作用。我正在使用 Bootstrap 4、Angular 5+，我的表单是水平和垂直的。

这里是html：

            <form>
            <div class="col-lg-12">
                <div class="form-row">
                    <div class="col-12 col-xl-4 col-sm-12 col-md-4">
                        <label for="rg">Número do RG</label>
                        <div class="input-group">
                            <input [(ngModel)]="dados.rg" name="rg" id="rg" type="text" class="form-control"><span class="separator d-none d-md-block">-</span>
                        </div>
                    </div>

                    <div class="col-12 col-xl-4 col-sm-12 col-md-4">
                        <label for="data">Data de emissão</label>
                        <div class="input-group">
                            <input [textMask]="mask" id="data" [(ngModel)]="dados.data" name="data" type="text" class="form-control"><span class="separator d-none d-md-block">-</span>
                        </div>
                    </div>

                    <div class="col-12 col-xl-4 col-sm-12 col-md-4">
                        <label for="orgao">Orgão Expedidor</label>
                        <ng-select class="custom" [(ngModel)]="dados.orgaoExpedidor" id="orgao" name="orgao" (change)="onChange($event)">
                            <ng-option *ngFor="let orgao of orgaos" [value]="orgao.value">{{orgao.label}}</ng-option>
                        </ng-select>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 input-radio">
                <div class="form-row form-inline justify-content-center">
                    <label class="radio-label">Sexo</label>
                    <div class="btn-group" btnRadioGroup [(ngModel)]="dados.sexo" name="radio">
                        <label class="btn btn-info" [value]="Masculino" btnRadio="Masculino" tabindex="0" name="masculino" role="button">Masculino</label>
                        <span class="separator">-</span>
                        <label class="btn btn-info" [value]="Feminino" btnRadio="Feminino" tabindex="0" name="feminino" role="button">Feminino</label>
                    </div>
                </div>
            </div>
        </form> 

在 scss 中我这样做：

    input:focus {
    border-color: $verde;
    color: $verde;
} 

我试过这样：

    input:focus + label {
    border-color: $verde;
    color: $verde;
} 

但它不起作用，输入失去了颜色

Answer 1

这不起作用，因为label 没有直接放在输入元素之后。 + 选择器查看第一个选择器的直接后代，即input + label 目标所有label 元素立即出现在input 元素之后。

在您的情况下，span 是输入之后的第一个元素。

一个小的结构改变就可以解决问题。

第一个输入的结构可以工作：

<input [(ngModel)]="dados.rg" name="rg" id="rg" type="text" class="form-control">
<label for="rg"><span class="separator d-none d-md-block">-</span>Número do RG</label>

编辑 1：第二个输入现在使用伪类 focus-within。 IE/Edge 尚不支持此功能。如果这行不通。您可以使用第一种情况，但设置标签的样式，使其显示在上方。此外，您可以使用 Javascript/JQuery 通过代码来执行此操作。

input:focus {
    border-color: green;
    color: green;
}

input:focus + label {
  color: red;
}

.input-group:focus-within label {
  color: red;
}

<form>
   <div class="col-lg-12">
      <div class="form-row">
         <div class="col-12 col-xl-4 col-sm-12 col-md-4">
            <div class="input-group">
               <input [(ngModel)]="dados.rg" name="rg" id="rg" type="text" class="form-control">
               <label for="rg"><span class="separator d-none d-md-block">-</span>Número do RG</label>
            </div>
         </div>
         <div class="col-12 col-xl-4 col-sm-12 col-md-4">
            <div class="input-group">
               <label for="data">Data de emissão</label>
               <input [textMask]="mask" id="data" [(ngModel)]="dados.data" name="data" type="text" class="form-control"><span class="separator d-none d-md-block">-</span>
            </div>
         </div>
         <div class="col-12 col-xl-4 col-sm-12 col-md-4">
            <label for="orgao">Orgão Expedidor</label>
               <ng-select class="custom" [(ngModel)]="dados.orgaoExpedidor" id="orgao" name="orgao" (change)="onChange($event)">
                  <ng-option *ngFor="let orgao of orgaos" [value]="orgao.value">{{orgao.label}}</ng-option>
               </ng-select>
            </div>
          </div>
        </div>
            <div class="col-lg-12 input-radio">
                <div class="form-row form-inline justify-content-center">
                    <label class="radio-label">Sexo</label>
                    <div class="btn-group" btnRadioGroup [(ngModel)]="dados.sexo" name="radio">
                        <label class="btn btn-info" [value]="Masculino" btnRadio="Masculino" tabindex="0" name="masculino" role="button">Masculino</label>
                        <span class="separator">-</span>
                        <label class="btn btn-info" [value]="Feminino" btnRadio="Feminino" tabindex="0" name="feminino" role="button">Feminino</label>
                    </div>
                </div>
            </div>
        </form>

Answer 2

在你的 CSS 中试试这个

.input-group {
  input {
    background-color: transparent;

    &:focus {
      border-color: $verde;
      color: $verde;
    }
  }
}