「轉換」文本框與滑動動畫的文本區域

我正在嘗試製作一個帶有展開箭頭的文本框，當單擊該按鈕時，將刪除文本框並用較大的textarea替換它，並使用jQuery進行良好的滑動動畫。問題在於，相對定位的箭頭位於右側，左側的標籤隨着文本框展開而向下滑動。我一直在嘗試vertical-align,display,padding和其他CSS屬性的各種組合，試圖將它們全部保留在頂部而無效。有趣的是，該設計在Firefox中運行，標籤和箭頭位於我想要的位置，但不在Chrome或IE中。你可以看到工作here。「轉換」文本框與滑動動畫的文本區域

來源

2012-06-09 D. Strout

您需要將vertical-align: top;設置爲您的textarea，並且在執行動畫時不要更改它。我在Chrome調試器中試過，它工作正常。

另外，你爲什麼交換<input type="text" />與<textarea>？爲什麼不從一開始就有<textarea>，給它一個小高度？

UPD。將vertical-align: top;指定給您的<input>元素，因此當您將其交換到textarea時，標籤和箭頭將保留在相同的位置。如果需要，可以使用top或margin-top稍微將它們微調一下。

//我手頭沒有IE，所以目前無法幫助你...... IE瀏覽器出現建議更改後會發生什麼？

來源

2012-06-09 13:01:51

那種作品，但它仍然有點奇怪。文本框相對於標籤和箭頭顯得太低。至於爲什麼我沒有使用文本框開始，這是因爲文本框處理文本溢出和粘貼新行的方式 –

請參閱更新的答案... –

使用一點'position：relative' magic on標籤和箭頭。謝謝您的幫助。 –

「轉換」文本框與滑動動畫的文本區域

回答

相關問題