Textarea
Default Textarea with Floating Label
.c-float-container.-has-textarea > .c-textarea
Show Code
html
<div class="c-float-container -has-textarea">
<label class="c-label" for="textarea1">Floating Label</label>
<textarea class="c-textarea" name="" id="textarea1" cols="30" rows="10" data-placeholder=".. and Placeholder Text"></textarea>
</div>No Label
.c-float-container.-has-textarea.-no-label > .c-textarea
Textarea on Dark Background
.c-float-container.-has-textarea.-light > .c-textarea.-light
Show Code
html
<div class="p-b-l h-highlight-block">
<div class="c-float-container -has-textarea -light">
<label class="c-label" for="textarea2">Floating Label</label>
<textarea class="c-textarea -light" name="" id="textarea2" cols="30" rows="10" data-placeholder=".. and Placeholder Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</textarea>
</div>
</div>Textarea "Old-Style"
Default Plausi-Textarea
.c-textarea.-old
html
<label class="c-label -old" for="example-textarea"></label>
<textarea class="c-textarea -old" id="example-textarea" name="" value="" />Autosize Textarea
TIP
Based on Autosize JS. Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.
Use the class .flexible-textfield in plausi or initialize like this: autosize($('#demo-autosize'));
Show Code
html
<label class="c-label -old" for="demo-autosize"></label>
<textarea rows="1" cols="40" class="flexible-textfield c-textarea -old" id="demo-autosize">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</textarea>