css - Input field with background img outside of input -

setup: cannot change outside of css, can ask change easier if can done in html. other have create jquery snippet , see if developer include it.

problem: need image(red incorrect image) to right of input field, stay inside of input field.

solutions attempted.

.passwordmismatch {     background: url("layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;     border-color: red !important;     border-width: 2px !important; } 

i tried knowing wouldnt work well.

.passwordmismatch:after {     background: url("layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;     height: 40px;     padding-right: 200px; } 

appreciate in solving this. http://jsfiddle.net/cornelas/dpqxr/

---

i appreciate everyones responses unfortunately deadend , solutions offered pretty anticipated. thank you.

you can't use :after pseudo selector on form element.

so add element after , position left, like:

.passwordmistmatchmessage {     display: block;     content: "";     background: url("https://selfservice.ennis.com/layout/pw_error_tooltip.png") repeat scroll 0 0 transparent;     border-color: red !important;     border-width: 2px !important;     width: 176px;     height: 30px;     position: absolute;     left: 320px;     top: 8px; } 

... , add element using jquery ...

$(".passwordmismatch").after("<span class='passwordmistmatchmessage'></span>"); 

@see http://jsfiddle.net/dpqxr/2/