Question

我正在使用来自https://tympanus.net/Development/TextInputEffects/

的预制表格（Haruki）

JSFiddle是https://jsfiddle.net/kacikw/6b9djm76/#&togetherjs=ERPObvDR7G

我无法弄清楚如何将输入区域放入一个可以有多行的文本区域（对于评论部分）。

就像我不知道如何修改预制表单一样，我尝试将html和css中的类更改为textarea版本的输入（就像它是.input-field我做的那样.textarea-field ）

请帮助我是一名绝望的学生，为我的决赛工作。

HTML

<div class="cell small-12">
  <div class="textarea textarea--haruki">
   <div class="textarea__field textarea__field--
   haruki" type="text" id="input-3" />
   <label class="textarea__label textarea__label--haruki" for="input-3">
    <textarea class="textarea__label-content textarea__label-content--haruki">MESSAGE
    </textarea>
   </label>
 </div>
</div>

CSS

.textarea {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
}

.textarea__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none; /* for box shadows to show on iOS */
}

.textarea__field:focus {
outline: none;
}

.textarea__label {
display: inline-block;
float: right;
width: 40%;
color: #6a7989;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.textarea__label-content {
position: relative;
display: block;
padding: .9em 0;
width: 100%;
}

.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}

.icon {
color: #ddd;
font-size: 150%;
}

/* Haruki */
.textarea--haruki {
margin: 3em 1em 1em;
}

.textarea__field--haruki {
padding: 1em 0.25em;
width: 100%;
background: transparent;
color: #CC450C;
font-size: 1.55em;
font-family: 'Overpass', sans-serif;
}

.textarea__label--haruki {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
}

.textarea__label-content--haruki {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.textarea__label--haruki::before,
.textarea__label--haruki::after {
content: '';
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 4px;
background: #BEEFEC;
-webkit-transition:-webkit-transform 0.3s;
transition: transform 0.3s;
}

.textarea__label--haruki::before {
top: 0;
}

.textarea__label--haruki::after {
bottom: 0;
}

.textarea__field--haruki:focus + .textarea__label--haruki 
.textarea__label-content--haruki,
.textarea--filled .textarea__label-content--haruki {
-webkit-transform: translate3d(0, -90%, 0);
transform: translate3d(0, -90%, 0);
}

.textarea__field--haruki:focus + .textarea__label--haruki::before,
.textarea--filled .textarea__label--haruki::before {
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
}

.textarea__field--haruki:focus + .textarea__label--haruki::after,
.textarea--filled .textarea__label--haruki::after {
-webkit-transform: translate3d(0, 0.5em, 0);
transform: translate3d(0, 0.5em, 0);
}

/*for a clear bg*/
[type='text']:focus{
border: none;
background-color: transparent;
box-shadow: none;
}

Answer 1

您没有将输入标记放入textarea。试试<textarea cols="10" row="10"></textarea>

基金会＆amp; CSS：如何将预制表单制作成文本区域

1 个答案: