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

Question

I'm trying to place a "tick" image next to every valid textbox(client side validation) next. To do this I'm using psuado element.

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 class is dynamically added to input element when input is valid. But Not firing the image.

Ray

Answer 1

This could be a little problematic using only CSS, because :after element is a part of used element, but input CANNOT have any child elements.

You have to do something like:

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

Edit:

Useful answer: https://stackoverflow.com/a/4660434/2746472