How to place image next to text box using pseudo Element?

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

You can't use pseudo elements on replaced elements like `inputs`. — ralph.m, Aug 20 '14 at 09:39

score 3 · Answer 1 · edited May 23 '17 at 10:26

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

How to place image next to text box using pseudo Element?

1 Answers1