限定されたスペースにクリアボタン付きのテキスト入力を作成したいと思います。 iPhoneのように、私は入力のすぐ内側にあるボタン（小さいx画像）を入力の内側に置いて、入力の横のスペースを無駄にするのではなく、値をクリアするためにクリックすることができます。テキスト入力の（上に）クロスブラウザボタンを配置するにはどうすればよいですか？
今は入力上に背景画像を使用していますが、上に表示される非表示のスパンです。これは私が望むことを成し遂げますが、問題があります：ユーザーがテキストを入力するだけでイメージを超え、IEがイメージより上の要素をサポートしていないようです。最初の問題を解決するために、私は右の入力の余白を設定しようとしましたが、入力を同じサイズにしてテキストを領域に限定するのではなく、全体を縮小しました。
このコンパクトな入力とクリアボタンのコンボを作成し、最新のすべてのブラウザで同じように見えて機能させることができますか？
ありがとうございます！
テキストの上のボタンをしたい場合は、次のテキストに干渉しないようにボタンをしたい場合は
<span><input><button>X</button></span>
span {display:inline-block; position:relative;}
button {position:absolute; right:0; top:0;}
は：
span {border:2px inset gray; background:white; color:black;}
input {border:0; color:inherit; background:transparent;}
あなたはright-marging: 0;でテキスト入力を行ってから入れることができます（インライン）の画像、入力拡張をシミュレートする背景を持つdiv/spanの画像です。このようにして入力は画像に達する直前にをスクロールし、依然として入力イメージ効果を得ます。
私はこれをテストしていないんだけど、それはこのようなものになるだろう：あなたも単なるCSSを使用して、背景画像なしで入力を拡張することができ
<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;}
。
は、余白の代わりにパディングを使用していた可能性があります。 – mpen