具有灵活背景图像的文字区域，可调整文本大小

我有一个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

具有灵活背景图像的文字区域，可调整文本大小

回答

相关问题