How can I place a cross-browser button within (on top) of an text input?

Question

I'd like to create a text input with a clear button in a confined space. Like the iPhone, I want to place the button (a small x image) 'inside' the input at the far right so that a user can just click that to clear the value, instead of having to waste space beside the input.

Right now I'm using a background image on the input and an invisible span hovering over top. This accomplishes what I want, but there are problems: if the user types too much text just goes over the image, and IE doesn't seem to support elements above images. To solve the first problem I tried setting the margin of the input on the right, but that shrank the entire thing as opposed to keeping the input the same size and limiting the text to an area.

Do you know of any way I can create this compact input and clear button combo and have it look and function the same across all modern browsers?

Thanks!

Answer 1

If you want button on top of text:

<span><input><button>X</button></span>

span {display:inline-block; position:relative;}
button {position:absolute; right:0; top:0;}

If you want button not to interfere with the text:

span {border:2px inset gray; background:white; color:black;}
input {border:0; color:inherit; background:transparent;}

Answer 2

You could make a text input with right-marging: 0; and then put the image right next to it (inline), in a div/span with a background simulating a input extension. This way the input scrolls right before reaching the image, and you still get the image-in-input effect you desire.

I'm not testing this, but it would be something like this:

<input /><span><img /><span/>

input{margin-right: 0; border: 1px solid black; border-right: 0; background-color: white; color: black;}
span{background-image: url('xxx.png');width:20px;}
img{margin-left:0;border:1px solid black;border-left: 0;}

You could even extend the input without a background-image, just using plain css.