Display image outside html element with CSS

Answer 1

Of course, with CSS2 it is completely possible (although it is not supported by IE):

input.test:before
{
   padding: 4px;
   content: url(images/your_image.gif);
}

For more info, check out the following links:

• http://www.quirksmode.org/css/beforeafter.html
• http://www.w3.org/TR/CSS2/generate.html

If you want something that works in IE as well, you will have to do it with javascript, I'm afraid.

Answer 2

Why not make use of the label element? i.e:

<style>
.required { padding-right: 20px; background: url(...) no-repeat 50% 100%; }
</style>
<label class="required" title="This is a required field"><dfn>My Field:</dfn> <input type="text" /></label>

Answer 3

You could use a container:

CSS

#field-container
{
    padding-right: 10px;
    background: transparent url(images/dot.gif) middle right no-repeat;
}

HTML

<div id="field-container" class="form-row">
 <label for="field">Field:</label>
 <input type="text" value="" id="field" name="field" />
</div>