将文本区域视为输入字段？

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 -->

将文本区域视为输入字段？

Treating a textarea as an input field?

html

css

forms

css-transforms