基金会和CSS:如何使预制的形式转化为文本区域
问题描述:
我使用的是预制的格式(村上)从https://tympanus.net/Development/TextInputEffects/基金会和CSS:如何使预制的形式转化为文本区域
的jsfiddle是https://jsfiddle.net/kacikw/6b9djm76/#&togetherjs=ERPObvDR7G
我无法弄清楚如何将输入区域放入一个文本区域,该区域可以有多于一行(对于注释部分)。
就像我不知道如何修改预先制作的表单,我试着改变HTML和CSS中的类到textarea版本的输入(如果它是.input-field我使它.textarea-场)
请帮助我是一个绝望的学生在我的决赛工作。
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;
}
答
你不把输入标记文本区域。 尝试<textarea cols="10" row="10"></textarea>