我想在密闭空间中创建一个带有清除按钮的文本输入。像iPhone一样，我希望将按钮（一个小的x图像）放在最右边的输入内，这样用户只需点击它就可以清除值，而不必在输入旁边浪费空间。
现在我在输入上使用背景图像，并在顶部悬停一个看不见的跨度。这实现了我想要的，但有问题：如果用户输入太多文本只是覆盖图像，IE似乎不支持图像上方的元素。为了解决第一个问题，我尝试在右边设置输入的边距，但这会缩小整个内容，而不是保持输入大小相同并将文本限制在某个区域。
您知道我可以创建这个紧凑的输入和清除按钮组合的任何方式，并使其在所有现代浏览器中看起来和功能相同吗？
谢谢！
答案 0 :(得分：3)
如果您想在文字顶部按下按钮：
<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;}
答案 1 :(得分：0)
您可以使用right-marging: 0;进行文本输入，然后将图像放在它旁边（内联），在div / span中，背景模拟输入扩展名。这样输入在到达图像之前滚动，然后您仍然可以获得所需的图像输入效果。
我没有测试这个，但它会是这样的：
<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;}
你甚至可以在没有背景图像的情况下扩展输入，只需使用普通的CSS。