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

那不是你如何制作textarea。试试这个：

工作示例：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 -->

将textarea作为输入字段处理？

1 个答案: