基金會和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; 
}

來源

2017-08-31 Kaci Kwiatek

你不把輸入標記文本區域。嘗試<textarea cols="10" row="10"></textarea>

來源

2017-08-31 02:57:46

基金會和CSS：如何使預製的形式轉化爲文本區域

回答

相關問題