javascript - 在输入字段中添加 Glyphicon？

Question

我正在将 jquery-validation 与 glyphicons 集成。基本上，当用户正确输入内容时，我希望在输入框中看到字形图标，如下所示:

但我希望它成为通过 CSS :after 属性触发的东西。我什么也做不了，即使内容设置为“QDQWDQWD”或一些随机字符串。 :after 元素没有出现在 Inspect 元素中。我在做正确的方法还是可以通过其他解决方案更轻松地解决这个问题？ (顺便说一句，这是在 Rails 中，如果添加一些东西的话。)

标记:

<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 Mann 所述，input、textarea、img 等某些元素称为替换元素，:after 和 :before 是不支持这些元素。

由于 jquery 验证插件根据验证通过/失败添加了 valid/error 类。我们可以按照 fiddle 所示操作我们的 css。只需将类从有效更改为错误或从错误更改为有效即可查看更改。

HTML 的更多变化是我们需要在每个 input 的末尾添加额外的 span。

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