具有靈活背景圖像的文字區域，可調整文本大小

我有一個textarea，它的背景是一個手繪框。我想讓背景圖片的height與其中的文字一起展開。因此，當輸入的文字超出textarea的height/width，而不是看到滾動條時，圖像（連同文本框本身）將被調整大小以匹配文本的整個高度。我認爲這可以通過爲textarea CSS添加min-height: 200px/max-height:100%來解決，但不知道如何正確實施它。具有靈活背景圖像的文字區域，可調整文本大小

我正在使用的代碼是：

textarea{ 
     background: #FFF url(box.png) no-repeat 0px 0px; 
     background-attachment:fixed; 
     width: 605px; 
     height: 200px; 
     line-height:20px; 
     padding:30px; 
     text-indent:3px; 
     margin:0; 
     border: none; 
    }

<textarea type="text" class="textbox" size="14"></textarea>

編輯：只是爲了澄清，這不是我們將要使用的實際圖像，設計師正在做一個更好的版本 - 只有一個我在油漆中一起攀登。

來源

2011-12-20 Jascination

A <div>與contenteditable和display: inline-block;可以像沒有代碼一樣運作，像<textarea>一樣工作。

演示：http://jsfiddle.net/ThinkingStiff/sau9r/

HTML：

<div contenteditable>expaning textarea</div>

CSS：

div { 
    display: inline-block; 
    background-image: url(http://i.stack.imgur.com/EiR9T.png); 
    background-size: 100% 100%; 
    background-repeat:no-repeat; 
    min-height: 100px; 
    min-width: 200px; 
    outline: 0; 
    padding: 30px 30px 40px 20px; 
}

來源

2011-12-20 07:54:34 ThinkingStiff

文本區域通常不會調整大小以匹配輸入文本的高度，因此您需要使用js。有關如何執行此操作，請參閱autosizing-textarea和implementing-a-resizable-textarea。還有jquery插件可用。

拉伸背景將會特別困難，因爲它是手繪的。

我建議建立一個<div>與頂部邊框的背景圖像，隨後<textarea>用左，右兩側的背景圖像可重複垂直，再加入<div>與底邊框的背景圖像。

來源

2011-12-20 07:01:39 marissajmc

具有靈活背景圖像的文字區域，可調整文本大小

回答

相關問題