在输入字段中添加Glyphicon？

Question

我正在将jquery-validation与glyphicons集成。基本上当用户正确输入内容时，我想在输入框中看到glyphicon，如下所示：

但是我希望它成为通过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

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

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

以下是使用修改后的代码版本的示例：

http://jsfiddle.net/9RsCS/

Answer 2

如@Blake Mann所述，input, textarea, img等某些元素称为替换元素，:after和:before不支持这些元素。

因为jquery验证插件基于验证通过/失败添加了valid/error类。我们可以操纵我们的css，如小提琴所示。只需将类从有效更改为错误或从错误更改为有效以查看更改。

我们需要在每个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;
}