Treating a textarea as an input field? - html

Question

I'm building a contact form with a css transform effect that uses the labels on the input fields. I need the final one's label to act the same way as the previous ones, but this final one needs to be a multi-line text area. Is there anyway to accomplish this?
HTML
<div class="questions">
<div class='form-field'>
<input required='required'>
<label>
Hey, what's your name?
</label>
</div>
<div class='form-field'>
<input required='required'>
<label>
How about your email?
</label>
</div>
<div class='form-field'>
<input textarea required='required' rows="5" cols="30">
<label>
Finally, what's your message?
</label>
</textarea>
</div>
</div><!-- /questions -->
CSS
body .form-field {
margin: auto;
overflow: hidden;
position: relative;
left: 0;
top: 0;
bottom: 0;
height: 100px;
right: 0;
font-family: "Oswald", sans-serif;
max-width: 500px;
width: 92%;
margin:40px 0;
}
body label {
font-size: 23px;
position: absolute;
text-shadow: 0px 2px rgba(0, 0, 0, 0.26);
height: 100px;
left: 0;
width: 400px;
color: white;
top: 28px;
z-index: -1;
transition-duration: 0.2s;
transition-property: transform;
}
body input, body textarea {
border: none;
padding: 40px 0px 20px 0px;
box-shadow: 0px 3px white, 0px 5px rgba(0, 0, 0, 0.16);
color: white;
text-shadow: 0px 2px rgba(0, 0, 0, 0.26);
background: transparent;
outline: none;
height: 19px;
font-family: "Oswald", sans-serif;
transition-property: transform;
font-size: 17px;
max-width: 500px;
width: 92%;
}
body input:focus + label, body textarea:focus + label {
transform: translateY(-39px) translateX(-80px) scale(0.6);
}
body label:after {
content: "";
box-shadow: inset 8px -8px 0 white, -3px 4px 0 rgba(0, 0, 0, 0.26);
position: absolute;
top: 20px;
right: -100px;
height: 28px;
transition-duration: 0.1s;
transition-property: transform;
transform: rotate(-45deg) scale(0.6);
width: 60px;
float: right;
display: block;
margin: 13px auto;
}
body input:valid + label, body textarea:valid + label{
transform: translateY(-39px) translateX(-80px) scale(0.6);
}
body input:valid + label:after, body textarea:valid + label:after {
display: block;
transform: translateX(260px) rotate(-45deg);
}
body input:invalid + label::after, body textarea:invalid + label::after {
transform: translateX(260px) rotate(-45deg);
}
Fiddle

Answer 1

That's not how you make an textarea. Try this:
Working example: JSFiddle
HTML
<div class="questions">
<div class='form-field'>
<input required='required'>
<label>
Hey, what's your name?
</label>
</div>
<div class='form-field'>
<input required='required'>
<label>
How about your email?
</label>
</div>
<div class='form-field'>
<textarea required='required' rows="5" cols="30"></textarea>
<label>
Finally, what's your message?
</label>
</div>
</div><!-- /questions -->