我正在尝试使用Formspree向我的网站添加一个简单的联系表。我在网上看到了一些看起来不错的样式,但是我无法阻止标签返回到其原始位置,因此可以回顾刚刚输入的内容。
我尝试过更改label-content类的转换值,但这没有什么区别,我不确定是否有一些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>
答案 0 :(得分:3)
由于CSS不支持输入状态(即为空或已填充),因此可以使用一些Javascript解决解决方案的问题。
您可以向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;
}
您可以找到一个有用的小提琴here,我们很乐意回答您遇到的其他问题。
答案 1 :(得分:0)
我认为这对您来说可能是一个简单的解决方案。
var inputs = document.getElementsByClassName('input');
for(var i = 0; i < inputs.length; i++){
inputs[i].onchange = function(){
(this.value) ? this.className = 'input filled' : this.className = 'input';
}
}
#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="inputFormName" required>
<label class="label" for="name" id="name"><span name="label" class="label-content">Your name</span></label>
</fieldset>
<fieldset class="field">
<input class="input" type="email" id="inputFormEmail" name="_replyto" required>
<label class="label" for="_replyto" id="_replyto"><span class="label-content">Your email</span></label>
</fieldset>
<fieldset class="field">
<textarea class="input" name="message" id="inputFormMessage" rows="1" required></textarea>
<label class="label" for="message" id="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>
答案 2 :(得分:0)
I am very close with this solution: CodePen Here!
我所做的是将转换设置添加到input:valid
元素中:
input:valid + .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);
}
这可以满足要求,但是仅当添加的信息正确时,例如电子邮件输入看起来像:example@example.com,我也无法使文本区域正常工作,可能值得使用<input type="text">
而不是<textarea>
我会继续努力,但是老实说JavaScript解决方案将是最好的