我正在尝试使用 formspree 向我的站点添加一个简单的联系表单。我在网上看到一些看起来不错的样式,但我无法阻止标签返回到其原始位置,从而检查刚刚输入的内容。
我已经尝试更改标签内容类的转换值,但这没有任何区别,我不确定某些 java 脚本是否是比纯 css 更好的解决方案。
#contactform,
.form {
margin-top: 2rem;
}
.field {
border: none;
position: relative;
z-index: 1;
margin: 0 1em 0 0;
width: 100%;
vertical-align: top;
overflow: hidden;
}
.field:nth-child(3) {
margin-right: 0;
}
.input {
position: relative;
display: block;
float: right;
border: none;
border-radius: 0;
-webkit-appearance: none;
width: 100%;
background: transparent;
padding: 0.5em;
margin-bottom: 2em;
z-index: 100;
height: 2rem;
}
textarea.input {
resize: none;
padding-bottom: 0;
}
.input:focus {
outline: none;
}
.label {
display: inline-block;
float: right;
color: #0C6333;
font-weight: bold;
-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;
width: 100%;
position: absolute;
text-align: left;
padding: 0.5em 0;
pointer-events: none;
font-size: 1em;
}
.label::before,
.label::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
.label::before {
height: 100%;
background: #fff;
top: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.label::after {
height: 2px;
background: #0C6333;
top: 100%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.label-content {
position: relative;
display: block;
width: 100%;
padding: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.3s, color 0.3s;
transition: transform 0.3s, color 0.3s;
}
.input:focus,
.input--filled .input {
opacity: 1;
-webkit-transition: opacity 0s 0.3s;
transition: opacity 0s 0.3s;
}
.input:focus+.label::before,
.input--filled .label::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input:focus+.label .label-content,
.input--filled .label .label-content {
color: #cbc4c6;
-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
}
.button,
input[type=submit] {
-webkit-appearance: none;
border: none;
border-radius: 0.25rem;
padding: 0.5em;
color: #fff;
background-color: #0C6333;
transition: all 0.3s ease-out;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 2px 10px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 2px 10px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}
.button:hover,
.button:focus,
.button:active {
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.20);
-moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.20);
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.20);
}
<form class="form" id="contactform" method="POST">
<fieldset class="field">
<input class="input" type="text" name="name" id="inputForm" required>
<label class="label" for="name"><span name="label" class="label-content">Your name</span></label>
</fieldset>
<fieldset class="field">
<input class="input" type="email" id="inputForm" name="_replyto" required>
<label class="label" for="_replyto"><span class="label-content">Your email</span></label>
</fieldset>
<fieldset class="field">
<textarea class="input" name="message" id="inputForm" rows="1" required></textarea>
<label class="label" for="message"><span class="label-content">Your message</span></label>
</fieldset>
<input class="hidden" type="text" name="_gotcha" style="display:none">
<input class="hidden" type="hidden" name="_subject" value="Message via contact form">
<input type="hidden" name="_next" value="" />
<fieldset class="field">
<input class="button submit" type="submit" value="Send">
</fieldset>
</form>
最佳答案
您的解决方案的问题可以通过一些 Javascript 来解决,因为 CSS 不支持输入状态,即空或已填充。
您可以将一个空的value
属性添加到您的input
和textarea
并添加一个onkeyup
监听器用用户的输入填充 value
属性。因此输入字段将如下所示:
<input class="input"
type="text"
name="name"
id="inputForm"
onkeyup="this.setAttribute('value', this.value);"
value="" required>
现在您可以随意选择“非空”输入样式,您可以查看下面的 CSS 示例
input:not([value=""]):not(:focus) + label .label-content,
textarea:not([value=""]):not(:focus) + label .label-content {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
font-size: 10px;
}
你可以找到一个可用的 fiddle here我很乐意回答您的任何其他问题。
关于css - 输入文本后保留标签位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52519700/