Add Glyphicon inside an input field?

Question

I'm integrating jquery-validation with glyphicons. Basically when the user inputs something correctly I'd like to see the glyphicon inside the input box, like so:

screenshot

But I'd like it to become something that is triggered via the CSS :after property. I can't get anything to work, even with content set to "QDQWDQWD" or some random string. The :after element doesn't appear in Inspect element. Am I doing the right approach or can this be solved easier with another solution? (BTW, this is in Rails, if that add something.)

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;
    }
}

[possible duplicate](http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box) — Vikram Deshmukh, Jan 03 '14 at 06:07

score 2 · Answer 1 · answered Jan 03 '14 at 06:19

The main issue here is that you cannot use :after with an input element. Certain elements, such as img or input are called "replaced elements", which are not compatible with this type of pseudo-selector.

Instead, you can put those styles on the div surrounding your input. Setting the div to position: relative; will allow you to position the checkmark absolutely, relative to that div. Setting your input to be as wide as the div, and then setting the div to control the width of both will make sure that the absolutely positioned element always stays within the input.

Here's an example using a modified version of your code:

http://jsfiddle.net/9RsCS/

Thanks Blake, I never knew about replaced elements. – Daryll Santos Jan 03 '14 at 13:30 — Daryll Santos, Jan 03 '14 at 13:30
How do you achieve this by using jQuery? – Pathros May 04 '16 at 17:20 — Pathros, May 04 '16 at 17:20

score 2 · Accepted Answer · edited Jul 24 '14 at 22:22

As stated by @Blake Mann, certain elements like input, textarea, img are called replaced elements and :after and :before are not supported for these elements.

Since jquery validation plugin adds valid/error class based on validation passes/fails. We can manipulate our css as shown in fiddle. Just change the class from valid to error OR from error to valid to see the change.

On more change in HTML is we need to add extra span at the end of each 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;
}

Wow, thanks Mahesh. Yeah I like this. The problem though is that some items on the form are grouped inside a form group. Would JavaScript help? — Daryll Santos, Jan 03 '14 at 13:37

Add Glyphicon inside an input field?

2 Answers2