Textarea mit flexiblen hintergrund-Bild, das die Größe für die Texteingabe
Ich habe eine textarea
hintergrund dessen ist eine hand-gezeichnete box. Ich möchte für die height
für das Hintergrundbild zu Strecken zusammen mit dem text, der geht es. Also wenn der text-Eingabe über die height
/width
des textarea
, anstatt ein zu sehen, eine Bildlaufleiste, wird das Bild (zusammen mit dem Textfeld selbst) wird angepasst, um match die volle Höhe des Textes. Ich nehme an, dies konnte behoben werden mit dem hinzufügen einer min-height: 200px
/max-height:100%
für die textarea
CSS aber weiß nicht wie man es richtig umsetzt.
Den code, den ich verwende, ist:
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>
EDIT: Nur zur Klarstellung, das ist nicht das eigentliche Bild, das wir verwenden werden, - designer macht eine viel schönere version - nur ich plonked zusammen in paint.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einen
<div>
mitcontenteditable
unddisplay: inline-block;
funktionieren kann, wie das ohne code und funktioniert wie ein<textarea>
.Demo: http://jsfiddle.net/ThinkingStiff/sau9r/
HTML:
CSS:
Text-Bereiche, die normalerweise nicht die Größe entsprechend der Höhe der text eingegeben, so müssen Sie mit js. Sehen die automatische Skalierung der Seiten-textarea und die Umsetzung-eine-resizable-textarea für Möglichkeiten, dies zu tun. Gibt es auch jquery-plugins zur Verfügung.
Dehnung der hintergrund wird besonders schwierig sein, weil es von hand gezeichnet.
Ich würde vorschlagen, die Schaffung eines
<div>
mit einer oberen Grenze, hintergrund Bild, gefolgt von der<textarea>
mit einem linken und rechten Seiten Hintergrundbild , dass wiederholen können vertikal, dann fügen Sie eine<div>
mit einem unteren Rand, hintergrund Bild.