Here is the code from my HTML file:
<div class="input-field">
<div>
<input type="text" id="name" required email/>
<label for="name">Email:
<mat-icon svgIcon="mail" class="change-color"></mat-icon>
</label>
</div>
<div>
<input type="text" id="psw" required />
<label for="psw">Password:</label>
</div>
</div>
This snippet is taken from my CSS file:
.input-field {
position: absolute;
width: 302px;
height: 44px;
line-height: 20px;
}
label {
position: relative;
top: -25px;
left: 0;
width: 100%;
color: rgba(158, 158, 158, 1.0);
transition: 0.2s all;
cursor: text;
font-size: 14px;
font-weight: 400;
}
input {
width: 100%;
border: 0;
outline: 0;
padding: 0.5rem 0;
border-bottom: 2px solid #d3d3d3;
box-shadow: none;
color: #111;
}
.change-color {
color: #787878;
height: 12px;
width: 12px;
float: right;
}
/* Additional CSS rules here */
To address a specific issue, I needed to modify the CSS like this:
/* Updated CSS rules here */ Despite trying various solutions, the desired effect was not achieved as indicated by this link https://stackblitz.com/edit/angular-dgrpcx?file=src%2Fapp%2Fapp.component.html. Therefore, I devised an alternative approach.
If you have any suggestions on how to solve this using Angular 6, please let me know.
For reference, here is what I aim to achieve: http://prntscr.com/m12bb0