Change label color when input is focus

Question

I need that when the focus is in the input, the label changes color, however, in my structure does not work. I'm using Bootstrap 4, Angular 5+ and my form is horizontal and vertical.

here is the 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> 

in scss I do it like this:

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

I tried like this:

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

but it did not work, and the input lost its color

Answer 1

try this in your css

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

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

Answer 2

This is not working as the label is not directly placed after the input element. The + selector looks at direct decedents of the first selector, i.e. input + label targets all label elements IMMEDIATELY present after an input element.

In your case the span is the first element following the input.

A small structure change should do the trick.

The first input is structured to work:

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

EDIT 1: The second input now uses the pseudo class focus-within. No support for this in IE/Edge yet. If this will not work. you can use the first case but style the label so it appears above. Also, you can use Javascript/JQuery to do this via code.

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>