Question

I can position a background image using the background property in an input field but I want an action to trigger when it is clicked.

Can I trigger an action on a background image click?

I just want to place a small ‘X’ image over the right hand side of input which clears the input.

Answer 1

You can absolutely position a link over the <input> and then apply a text-indent to the <input> to make room for the image. For example:

<div id="outer">
    <a href="javascript:void(0)" onclick="alert('click')"><img src="http://placekitten.com/16/16"></a>
    <input type="text">
</div>

And:

#outer {
    position: relative;
}
#outer a {
    position: absolute;
    top: 0;
    left: 0;
}
#outer input {
    text-indent: 16px;
}

Live demo: http://jsfiddle.net/ambiguous/TgaFf/

The outer <div id="outer"> is just there to give me something to apply position: relative to; absolutely positioned elements are positioned with respect to the nearest ancestor whose position is anything other than static. The text-indent on the <input> starts the input cursor 16px from the left side of the <input> and thus leaves space for the image. In the real world you would, of course, adjust the top, left, margins, paddings, … to make everything line up properly and look pretty.