Обработка текстового поля как поля ввода?

Question

Я создаю контактную форму с эффектом css transform, который использует метки в полях ввода. Мне нужен ярлык последнего, чтобы действовать так же, как и предыдущие, но этот последний должен быть многострочной текстовой областью. Нужно ли это сделать?

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

Это не так, как вы делаете текстовое поле. Попробуйте это:

Рабочий пример: 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 -->