Добавить глификон внутри поля ввода?

Question

Я интегрирую проверку jquery с глификонами. В принципе, когда пользователь вводит что-то правильно, я хотел бы видеть glyphicon в поле ввода, например, так:

Но я хотел бы, чтобы это стало то, что срабатывает через CSS :after свойства. Я не могу заставить ничего работать, даже с содержимым, установленным на «QDQWDQWD» или некоторой случайной строкой. Элемент :after не отображается в элементе Inspect. Правильно ли я делаю это или это легче решить с помощью другого решения? (Кстати, это в Rails, если что-то добавить.)

Markup:

<div class="form-group"> 
    <input class="form-control valid" id="user_email" 
      name="user[email]" placeholder="Email-Address" 
      size="30" type="email" value="a@aa5305.com"> 
</div> 

SASS:

input.valid{ 
    color: green; /* This works. The text does become green */ 
    &:after { 
     /* content: "<span class="glyphicon glyphicon-ok glyphicon-star"></span>";*/ 
     content: "QDQWDW"; 
     color: green; 
     font-weight:bold; 
     font-size: 18px; 
     position: absolute; 
     right: 12px; 
     top: 12px; 
    } 
} 

Answer 1

Как заявил @Blake Манн, некоторые элементы, такие как input, textarea, img называются замененные элементы и :after и :before не поддерживаются для этих элементов.

Поскольку плагин проверки правильности jquery добавляет класс valid/error, основанный на проверке проходов/сбоев. Мы можем манипулировать нашим css, как показано на скрипке. Просто измените класс от действительного до ошибки ИЛИ от ошибки до значения, чтобы увидеть изменение.

При изменении в HTML мы должны добавить дополнительные span в конце каждого input.

http://jsfiddle.net/9RsCS/1/

input.valid { 
    color: green; 
    width: 200px; 
} 
input.error { 
    color: red; 
    width: 200px; 
} 
.form-group { 
    position: relative; 
    width: 200px; 
} 
.form-group > .valid + span, 
.form-group > .error + span { 
    font-weight: bold; 
    font-size: 18px; 
    display: block; 
    position: absolute; 
    right: 0; 
    top: 2px; 
} 
.form-group > .valid + span:after { 
    content: "\2713"; 
    color: green; 
} 

Answer 2

Основной проблемой здесь является то, что вы не можете использовать :after с входным элементом. Некоторые элементы, такие как img или input, называются «замененными элементами», которые несовместимы с псевдоселектором этого типа.

Вместо этого вы можете поместить эти стили в div, окружающие ваш вход. Установка div на position: relative; позволит вам пометить галочку абсолютно относительно этого div. Установка вашего входного сигнала так же широко, как и div, а затем установка div для управления шириной обоих будет обеспечивать, чтобы абсолютно позиционированный элемент всегда находился внутри входа.

Вот пример, используя модифицированную версию кода:

http://jsfiddle.net/9RsCS/