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

输入为焦点时更改标签颜色

2 个答案: