Currently, I am working on a project using Angular2 with Materialize.
I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field.
You can view the red line in the image below: https://i.sstatic.net/27ktk.png
Below is the custom style code:
<div class="row">
<div class="col s12">
<input class="user-field" id="username" type="text" placeholder="Username">
</div>
</div>
<div class="row">
<div class="col s12">
<input class="password-field" id="password" type="password" placeholder="Password">
</div>
</div>
Additionally, here are the CSS classes used:
.user-field {
background: url(../../../../assets/img/auth/UserPicto.svg) no-repeat calc(100% - 12px);
background-size: 24px auto;
display: inline-block;
vertical-align: middle;
padding-right: 24px;
}
.password-field {
background: url(../../../../assets/img/auth/CadenasPicto.svg) no-repeat calc(100% - 12px);
background-size: 24px auto;
display: inline-block;
vertical-align: middle;
}