在输入字段中添加 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 类。我们可以操纵我们的 css，如 fiddle 所示。只需将类从有效更改为错误或从错误更改为有效即可查看更改。

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

Answer 2

这里的主要问题是您不能将:after 与输入元素一起使用。某些元素，例如img 或input 被称为“替换元素”，与此类伪选择器不兼容。

相反，您可以将这些样式放在围绕您的输入的 div 上。将 div 设置为 position: relative; 将允许您相对于该 div 绝对定位复选标记。将输入设置为与 div 一样宽，然后将 div 设置为控制两者的宽度将确保绝对定位的元素始终保持在输入内。

这是一个使用修改后的代码的示例：

http://jsfiddle.net/9RsCS/