如何在文本输入的上方放置跨浏览器按钮？

我想创建一个文本输入与一个明确的按钮在一个狭窄的空间。与iPhone一样，我想将按钮（小x图像）放在最右侧的输入内，以便用户只需单击该按钮即可清除该值，而不必浪费输入旁边的空间。如何在文本输入的上方放置跨浏览器按钮？

现在，我在输入上使用背景图像，并在顶部悬停了不可见的跨度。这完成了我想要的，但有一些问题：如果用户键入的文本太多只是越过图像，并且IE似乎不支持图像上方的元素。为了解决第一个问题，我尝试在右侧设置输入的边界，但是缩小了整个事物的范围，而不是保持输入的大小相同并将文本限制在某个区域。

你知道的任何方法可以让我创建这个紧凑的输入和清除按钮的组合，让它的外观和功能在所有现代浏览器一样的吗？

谢谢！

来源

2009-07-03 hornairs

本来可以使用填充而不是边距... – mpen 2009-07-03 20:10:05

如果您想对文本的顶部按钮：

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

来源

2009-07-03 20:07:28 Kornel

我想过做这样的事情，但页面上还有其他默认样式的输入，您认为这会打扰用户，这两个输入可能会看起来有点不同？否则，就是这样，谢谢！ – hornairs 2009-07-05 17:05:13

确实看起来很奇怪。恐怕唯一能让它保持一致的方法是对所有输入进行严格的设计。 – Kornel 2009-07-05 17:51:50

你可以做一个文本输入与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。

来源

2009-07-03 20:30:53 Spidey

如何在文本输入的上方放置跨浏览器按钮？

回答

相关问题