Observe a imagem abaixo:
Vocês podem perceber que o campo CEP está bem diferente do campo Estado e Cidade, estou ciente que as configurações do campo CEP é devido as recursos do PrimeNg do Angular e o campo Estado e Cidade não estão herdando essas configuração devido a uso diferentes de tags.
Eu já fiz várias tentativas para formatar o campo Estado e Cidade para ficar igual ao compo CEP, será que você poderiam me ajudar em relação a isso? por favor.
É referente a esse código abaixo;
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>CEP</label>
<p-inputMask mask="99999-999" type="text" name="cep" ngModel #cep="ngModel" required></p-inputMask>
<app-message [control]="cep" error="required"
text="Informe um cep"></app-message>
</div>
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>Cidade</label>
<div>
<select name="estado" id="estado" [(ngModel)]="uf" (change)="buscarCidades()">
<option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
</select>
</div>
</div>
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>Estado</label>
<div>
<select name="cidade" id="cidade">
<option *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
</select>
</div>
</div>
É esse campos que estou tendo dificuldade de formatar com CSS e Bootstrap:
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>Cidade</label>
<div>
<select name="estado" id="estado" [(ngModel)]="uf" (change)="buscarCidades()">
<option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
</select>
</div>
</div>
<div class="ui-g-12 ui-lg-3 ui-md-4 ui-fluid">
<label>Estado</label>
<div>
<select name="cidade" id="cidade">
<option *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
</select>
</div>
</div>