CSS not working in ASP.NET Boilerplate - html

Question

I'm trying to implement the same CSS for an input of type text as similar to the one we have in CreateUser default page. So when you click on User Name textbox it shows a blue line under it. Same I tried on my page it works fine, but when I go to other page and come to this page again, it does not show the blue line under the textbox.
create-user.component
<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog">
<div #modalContent class="modal-content">
<form *ngIf="active" #createUserForm="ngForm" id="frm_create_user" novalidate (ngSubmit)="save()">
<div class="modal-header">
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<span>{{l("CreateNewUser")}}</span>
</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active">User Details</li>
<li role="presentation">User Roles</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane animated fadeIn active" id="user-details">
<div class="row clearfix" style="margin-top:10px;">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
<label for="username" class="form-label">{{l("UserName")}}</label>
</div>
</div>
</div>
</div>
mypage.html
<div class="row clearfix" [#routerTransition]>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card main-content">
<div class="row" style="background-color:white;">
<div class="header">
<h2>
{{l('MyPage: ADD/EDIT')}}
</h2>
</div>
<br />
<form *ngIf="active" #myForm="ngForm" id="frm_create_store" novalidate (ngSubmit)="onSubmitBtnClick(myForm)">
<div class="col-md-12">
<div class="form-group form-float">
<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
</div>
</div>

Answer 1

I think you need to label with form="myName" inside the div which has class="form-line".
Instead of;
<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
Try this;
<div class="form-line">
<label for="myName" class="form-label">{{l("myName")}}</label>
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>