我需要当焦点在输入中时,标签会改变颜色,但是,在我的结构中不起作用。我使用的是 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;
}
但是没有用,输入失去了颜色
最佳答案
这不起作用,因为 label
没有直接放在输入元素之后。 +
选择器查看第一个选择器的直接后代,即 input + label
以 input< 之后立即出现的所有
元素。label
元素为目标
在您的例子中,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>
关于html - 输入焦点时更改标签颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50974423/