Textarea
CODE
×
HTML
<div class='textarea'> <textarea placeholder='Label'></textarea> <label class='floating-label'>Label</label> </div>
CSS
textarea, textarea:focus { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: 100%; min-width: 100%; max-width: 800px; padding-right: 30px; padding-left: 23px; padding-top: 18px; margin-bottom: 20px; margin-top: 20px; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; color: #000 !important; border-radius: 0; border: 1px solid #000; border-left: 6px solid #000; -webkit-box-shadow: none; box-shadow: none !important; min-height: 59px; height: 200px; } textarea::-webkit-input-placeholder { opacity:1; color:#707070 } textarea:-ms-input-placeholder { opacity:1; color:#707070 } textarea::placeholder { opacity:1; color:#707070 } textarea:placeholder-shown { border: 1px solid #707070; border-left: 1px solid #707070; color: #707070; padding-left: 28px; } textarea:placeholder-shown + label { opacity: 0; -webkit-transform: translateY(28px); -ms-transform: translateY(28px); transform: translateY(28px); } label.floating-label { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400; position:absolute; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:1; }
JS
Textarea
×
Label