Поэтому у меня есть эти новые пользовательские входы, которые можно найти здесь.
https://scotch.io/tutorials/google-material-design-input-boxes-in-css3
Теперь единственная проблема заключается в том, что проверка, которую я имел на этом, больше не работает.
В идеале я хочу, чтобы линия стала красной, когда проблема с проверкой с текстом undernetih. Вот код для одного из полей ввода
<input type="text" required placeholder=" Event Title" class="validate" ng-model="data.title">
<span class="fa fa-asterisk req"></span>
<span class="highlight"></span>
<span class="bar"></span>
<!-- <label>Event Title</label> -->
</div>
</div>
<div class="speech help-block has-error" ng-messages="details.title.$error" ng-if="details.title.$dirty || detailsSubmitted" role="alert">
<div ng-message="required" class="errormsg">Please enter a Title.</div>
<div ng-message="custom" class="errormsg">{{errorMessages.title}}</div>
</div>
этот пример работает
<form action="" method="get" name="details" accept-charset="utf-8">
<input type="text" name="title" required placeholder="Event Title" class="validate" ng-model="data.title">
<span class="fa fa-asterisk req"></span>
<span class="highlight"></span>
<span class="bar"></span>
<div class="speech help-block has-error" ng-messages="details.title.$error" ng-if="details.title.$dirty || detailsSubmitted" role="alert">
<div ng-message="required" class="errormsg">Please enter a Title.</div>
<div ng-message="custom" class="errormsg">{{errorMessages.title}}</div>
</div>
</form>