Change label color when input is focus - html

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

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>

Answer 2

try this in your css
.input-group {
input {
background-color: transparent;
&:focus {
border-color: $verde;
color: $verde;
}
}
}