Comment puis-je placer un bouton inter-navigateur à l'intérieur (en haut) d'une entrée de texte?

Question

Je voudrais créer une entrée de texte avec un bouton d'effacement dans un espace confiné. Comme l'iPhone, je veux placer le bouton (une petite image x) 'à l'intérieur' de l'entrée à l'extrême droite afin qu'un utilisateur puisse simplement cliquer dessus pour effacer la valeur, au lieu de devoir gaspiller de l'espace à côté de l'entrée. À l'heure actuelle, j'utilise une image d'arrière-plan sur l'entrée et une portée invisible planant au-dessus. Cela accomplit ce que je veux, mais il y a des problèmes: si l'utilisateur tape trop de texte, il ne fait que survoler l'image, et IE ne semble pas supporter les éléments au-dessus des images. Pour résoudre le premier problème, j'ai essayé de régler la marge de l'entrée sur la droite, mais cela rétrécit le tout plutôt que de garder l'entrée de la même taille et de limiter le texte à une zone.

Savez-vous de quelque manière que je peux créer cette combinaison compacte d'entrée et de bouton d'effacement et l'ai-je l'air et la fonction identique sur tous les navigateurs modernes?

Merci!

Answer 1

Si vous voulez bouton sur le dessus du texte:

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

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

Si vous voulez bouton ne pas interférer avec le texte:

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

Answer 2

Vous pouvez faire une entrée de texte avec right-marging: 0; puis mettre la image juste à côté (inline), dans un div/span avec un arrière-plan simulant une extension d'entrée. De cette façon, l'entrée fait défiler juste avant d'atteindre l'image et vous obtenez toujours l'effet d'entrée d'image souhaité.

Je ne suis pas tester ce, mais ce serait quelque chose comme ceci:

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

Vous pouvez même étendre l'entrée sans arrière-plan image, tout en utilisant css plaine.