带有 :after selector 的 Javascript addClass

Question

我正在使用 addClass 来验证我的表单。这是我的 javascript:-

if (name.val()=='') {
    name.addClass('highlight');
    return false;
} else name.removeClass('highlight');

我要添加的类的 css 是这样的:-

#coverup .highlight {
    border: 1px solid #a94442;
}

上面的脚本既有效又没问题，但是我想在文本字段中添加一个字形图标并更改边框颜色，这样错误对用户来说就变得更加突出。

然后我决定通过执行另一个 addClass 方法来简单地更改代码，如下所示:-

if (name.val()=='') {
    name.addClass('highlight');
    name.addClass('highlight:after');
    return false;
} else name.removeClass('highlight'); name.removeClass('highlight:after');

然后将我的 CSS 更改为:-

#coverup .highlight {
    border: 1px solid #a94442;
}
#coverup .highlight:after {
    content:"\2715";
    color: red;
}

然而，这样做并没有解决我的问题，任何人都可以给我一些选择或指导，告诉我如何简单地在我的文本字段的末尾添加一个字形图标，如果它没有被填充以及制作边框也改变颜色。

谢谢!

Answer 1

• <input />元素不能有子节点。
• ::before和 ::after伪元素被视为分别插入第一个“真实”子元素之前和最后一个“真实”子元素之后的子元素。

考虑到以上两个事实，你不能申请::before或 ::after至 <input />元素。