javascript - 如何使用伪元素将图像放在文本框旁边？

Question

接下来我试图在每个有效的文本框(客户端验证)旁边放置一个“勾号”图像。为此，我使用了 psuado 元素。

CSS

.valid {
border: 2px solid #a9cc56;
}

.valid:after {
content: "";
background: url('~/Areas/Waybill/Content/Images/icn-validation-valid.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
display: block;
}

.valid 类在输入有效时动态添加到输入元素中。但不发射图像。

雷

Answer 1

仅使用 CSS 可能会有点问题，因为 :after 元素是已用元素的一部分，但输入不能有任何子元素。

你必须做类似的事情:

<input /><span></span>

CSS:

.valid + span:after {
content: "";
background: url('~/Areas/Waybill/Content/Images/icn-validation-valid.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
display: block;
}

编辑:

有用的答案:https://stackoverflow.com/a/4660434/2746472