Wie kann ich eine browserübergreifende Schaltfläche innerhalb einer Texteingabe (oben) platzieren?

Question

Ich möchte eine Texteingabe mit einer klaren Schaltfläche auf engstem Raum erstellen. Wie das iPhone möchte ich die Schaltfläche (ein kleines x-Bild) "innerhalb" der Eingabe ganz rechts platzieren, so dass ein Benutzer einfach darauf klicken kann, um den Wert zu löschen, anstatt Platz neben der Eingabe zu verschwenden.

Momentan benutze ich ein Hintergrundbild auf der Eingabe und eine unsichtbare Spanne, die über der Spitze schwebt. Dies erreicht, was ich will, aber es gibt Probleme: Wenn der Benutzer zu viel Text eingibt, geht er einfach über das Bild, und IE scheint Elemente über Bildern nicht zu unterstützen. Um das erste Problem zu lösen, habe ich versucht, den Rand der Eingabe auf der rechten Seite zu setzen, aber das schrumpfte die gesamte Sache, im Gegensatz zu der Eingabe die gleiche Größe und die Begrenzung des Textes auf einen Bereich.

Kennen Sie irgendeine Art, wie ich diese kompakte Eingabe- und Löschtastenkombination erstellen kann und sie in allen modernen Browsern gleich aussehen und funktionieren lässt?

Danke!

Answer 1

Wenn Sie Taste oben auf Text wollen:

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

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

Wenn Sie Taste wollen nicht mit dem Text stören:

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

Answer 2

Sie könnten eine Texteingabe mit right-marging: 0; machen und dann die setzen Bild direkt daneben (inline), in einem div/span mit einem Hintergrund, der eine Eingabeerweiterung simuliert. Auf diese Weise scrollt die Eingabe direkt vor Erreichen des Bildes und Sie erhalten immer noch den gewünschten Bild-in-Eingang-Effekt.

Ich teste dies nicht, aber es wäre so etwas wie dieses:

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

Sie auch die Eingabe ohne Hintergrund-Bild erweitern konnte, einfach nur mit CSS.