Добавление значка шрифта в поле ввода при использовании простой формы

Question

Я посмотрел и использовал решение для размещения шрифтов-удивительных значков в поле ввода, как описано здесь.

StackOverflow answer

HTML

<input name="txtName" id="txtName"> 
<span class="fa fa-user errspan"></span> 

CSS

.errspan { 
    float: right; 
    margin-right: 6px; 
    margin-top: -60px; 
    position: relative; 
    z-index: 2; 
    color: gray; 
} 

Но это действительно не работает с простой формы, как и когда вы поместите иконку с помощью позиционирования CSS, значок будет не в том месте, когда простая форма показывает ошибку mes мудрецов ниже самих полей.

Так, например, если вы позиционируете значок для работы в одном состоянии, где это выглядит великолепно, когда сообщение об ошибке отображается так.

Он заканчивает тем, что неправильно в другом государстве, как это.

Answer 1

Решение оказывается довольно простым и прямым.

Переместите значок html, чтобы быть впереди входного html, как это.

HTML

<span class="fa fa-user errspan"></span> 
<input name="txtName" id="txtName"> 

Тогда просто настроить позиционирование CSS так, что она соответствует этой новой конвенции.

CSS

.errspan {  
    float: right 
    top: 24px 
    right: 6px 
    position: relative 
    z-index: 2 
    color: grey 
} 

Вы должны быть хорошо идти. Значок всегда будет находиться именно там, где вы разместили его независимо от того, в каком состоянии находится форма.