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;}