1
我有这样的代码：显示跨度为多行文本与CSS
.input {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: middle;
}
.input:focus{
outline-offset: -2px;
}
.input__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 */
}
.input__field:focus {
outline: none;
}
.input__label {
display: inline-block;
float: right;
padding: 0 1em;
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;
}
.input__label-content {
position: relative;
display: block;
padding: 1.6em 0;
width: 100%;
}
.span-texatarea {
overflow: auto;
height: 8rem;
resize: vertical;
vertical-align: top !important;
text-transform: none;
color: inherit;
font: inherit;
border: none;
outline: 0;
margin: 0;
-webkit-appearance: textarea;
appearance:textarea;
flex-direction: column !important;
white-space: pre-wrap !important;
word-wrap: break-word;
display: inline-block;
text-align: start;
-webkit-writing-mode: horizontal-tb;
}
/* Kaede */
.input--kaede {
display: block;
overflow: hidden;
margin: 1em auto 2em;
background: #EFEEEE;
}
.input__field--kaede {
position: absolute;
top: 0;
right: 100%;
width: 60%;
height: 100%;
background: #fff;
color: #9DABBA;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.input__label--kaede {
z-index: 10;
display: block;
width: 100%;
height: 100%;
text-align: left;
cursor: text;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.input__label-content--kaede {
padding: 1.5em 0;
}
.input__field--kaede:focus,
.input--filled .input__field--kaede {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
}
.input__field--kaede:focus + .input__label--kaede,
.input--filled .input__label--kaede {
-webkit-transform: translate3d(60%, 0, 0);
transform: translate3d(60%, 0, 0);
pointer-events: none;
}
@media screen and (max-width: 34em) {
.input__field--kaede:focus + .input__label--kaede,
.input--filled .input__label--kaede {
-webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
pointer-events: none;
}
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }<span class="input input--kaede">
\t \t \t \t \t <input class="input__field input__field--kaede" type="text" id="input-35" />
\t \t \t \t \t <label class="input__label input__label--kaede" for="input-35">
\t \t \t \t \t \t <span class="input__label-content input__label-content--kaede">Full Name</span>
</label>
</span>
<span class="input input--kaede">
\t \t \t \t \t <input class="input__field input__field--kaede" type="text" id="input-36" />
\t \t \t \t \t <label class="input__label input__label--kaede" for="input-36">
\t \t \t \t \t \t <span class="input__label-content input__label-content--kaede">E-Mail</span>
</label>
</span>
<span class="input input--kaede">
\t \t \t \t \t <input class="input__field input__field--kaede" type="text" id="input-37" />
\t \t \t \t \t <label class="input__label input__label--kaede" for="input-37">
\t \t \t \t \t \t <span class="input__label-content input__label-content--kaede">Phone Number</span>
</label>
</span>
<span class="input input--kaede">
\t \t \t \t \t <input class="input__field input__field--kaede" type="text" id="input-38" />
\t \t \t \t \t <label class="input__label input__label--kaede" for="input-38">
<span class="input__label-content input__label-content--kaede span-texatarea">Message
</span>
</label>
</span>https://jsfiddle.net/css_stroller/6ag9j836/
我基本上要的是 “消息跨度元素” 来显示像一个textarea但焦点上的过渡动画。更具体地说： 一旦消息区处于聚焦状态，动画和样式应该与其他区段类似，但是字词输入应该从顶部开始，并且使用自动换行和自动换行，就像正常的textarea一样。我尝试添加一个新类“span-textarea”并尝试使用
appearance:textarea;
但是这并没有帮助。
而且标签“消息”应该是
vertical-align:middle;
所以，它的内框为中心，但它不工作。我不太确定这是否可能。
[检查这个（https://jsfiddle.net/6ag9j836/4）。这是你想要的吗？？ –
@EugineJoseph是的，现在“消息”也应居中。 – erik7
您好。我们要求问题是相当独立的，这样如果链接中断，问题对未来的读者仍然可读并且有用。你会修复上面的帖子，以便它符合该指南吗？非常感谢！ – halfer