如何在文本輸入的上方放置跨瀏覽器按鈕？

我想創建一個文本輸入與一個明確的按鈕在一個狹窄的空間。與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

如何在文本輸入的上方放置跨瀏覽器按鈕？

回答

相關問題