My template is not showing the default select option that I have set for one select element.
I attempted to achieve this with the following code:
<div class="select">
<select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" name="selectMesEscolhido"
class="select-text">
<option class="dropdown-item" disabled selected value>Test</option>
<option [hidden]="datasComMovimentacoes[x].data == mesEscolhido" *ngFor="let mes of datasComMovimentacoes;let x = index"
class="dropdown-item">{{mes.data}}</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
</div>
I don't think the issue lies in my CSS, but here it is:
.select {
font-family:
'Roboto','Helvetica','Arial',sans-serif;
position: relative;
width: 100%;
margin-top: 5%;
font-size: 18px;
color: #757575!important;
}
.select-text {
margin-top: 10%;
position: relative;
font-family: inherit;
background-color: transparent;
color: #757575!important;
width: 100%;
font-size: 18px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0,0,0, 0.12);
}
/* Remove focus */
.select-text:focus {
outline: none;
color: #757575!important;
border-bottom: 1px solid rgba(0,0,0, 0);
}
/* Use custom arrow */
.select .select-text {
appearance: none;
color: #757575!important;
-webkit-appearance:none
}
This is what my template looks like currently: