联系人表单输入动画错误

Question

我最近问了一个关于联系表单动画的问题(当点击框时标签文本向上移动)，当我让动画正常工作时，我遇到了一个错误:

当我点击第一个和第二个框时(由于某些原因不是第三个)，它会激活其余框的动画，这很烦人。

我怎么能得到它，所以当点击一个框，它只动画框我点击，而不是其余的?

<div class="contact-col"  style="position:relative display:inline;" >
<input type="text" name="name" required>
<span id="floating-label">Yourname</span>
<input type="email" name="email" required>
<span id="floating-label-1">Your email</span>

<input type="text"  name="subject"  required>
<span id="floating-label-2">Subject</span>
</div>

.contact-col input, .contact-col textarea{
width: 100%;
padding: 15px;
margin-bottom: 25px;
outline: none;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}

.contact-col input:focus, .contact-col textarea:focus {
border: 1px solid yellowgreen;
box-shadow: 0 0 0 1px #8C7D50;
transition: 25ms box-shadow ease-in-out;
}


input:focus ~ #floating-label,
input:not(:focus):valid ~ #floating-label{
top: -0.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8C7D50 ;
font-weight: 400;
transition: 0.2s ease-in-out;

}
#floating-label {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 4.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}

#floating-label-1{
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 19%;
color: #777;
background: white;
transition: 0.2s ease all;
}

input:focus ~ #floating-label-1,
input:not(:focus):valid ~ #floating-label-1{
top: 14.25%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8C7D50 ;
font-weight: 400;
transition: 0.2s ease-in-out;
}


#floating-label-2{
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 33.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}

input:focus ~ #floating-label-2,
input:not(:focus):valid ~ #floating-label-2{
top: 28.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8C7D50 ;
font-weight: 400;
transition: 0.2s ease-in-out;
}

Answer 1

这是一个问题，因为您没有显式地选择输入。因此，如果您按名称选择输入，问题将得到解决。

.contact-col input,
.contact-col textarea {
width: 100%;
padding: 15px;
margin-bottom: 25px;
outline: none;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.contact-col input:focus,
.contact-col textarea:focus {
border: 1px solid yellowgreen;
box-shadow: 0 0 0 1px #8c7d50;
transition: 25ms box-shadow ease-in-out;
}
input[name='name']:focus ~ #floating-label,
input[name='name']:not(:focus):valid ~ #floating-label {
top: -0.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8c7d50;
font-weight: 400;
transition: 0.2s ease-in-out;
}
#floating-label {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 4.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}
#floating-label-1 {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 19%;
color: #777;
background: white;
transition: 0.2s ease all;
}
input[name='email']:focus ~ #floating-label-1,
input[name='email']:not(:focus):valid ~ #floating-label-1 {
top: 14.25%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8c7d50;
font-weight: 400;
transition: 0.2s ease-in-out;
}
#floating-label-2 {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 33.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}
input[name='subject']:focus ~ #floating-label-2,
input[name='subject']:not(:focus):valid ~ #floating-label-2 {
top: 28.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8c7d50;
font-weight: 400;
transition: 0.2s ease-in-out;
}

Answer 2

问题

当前，当任何输入值聚焦或有效时，您将移动所有浮动标签。

input:focus ~ #floating-label,
input:not(:focus):valid ~ #floating-label{
//...
}

解决方案要解决这个问题，您可以在输入标记中添加相同的id或类似于input-field-X的内容。这对你的css来说不是很好，因为它必须是可重复的，而且它增长得很快。所以我要创建一个单独的<div class="input-field>里面有标签和输入字段。这使得标签的定位和动画更容易，因为您可以将其绝对定位于div。

<div class="contact-col">
<div class="input-field">
<input type="text" name="name" required>
<label for="name">Your name</label>
</div>
<div class="input-field">
<input type="text" name="email" required>
<label for="name">Your email</label>
</div>
<div class="input-field">
<input type="text" name="subject" required>
<label for="name">Subject</label>
</div>
</div>

我还修正了你的CSS。

html,
body {
margin: 0;
}
body * {
box-sizing: border-box;
}
.input-field {
--input-field-height: 50px;
--input-field-padding-left: 10px;
position: relative; /* this is important for the positioning of the label*/
width: 600px;
height: var(--input-field-height);
margin: 15px;
}
.input-field input {
transition: 25ms box-shadow ease-in-out;
width: 100%;
height: 100%;
padding-left: var(--input-field-padding-left);
}
.input-field label {
position: absolute;
top: calc(var(--input-field-height) / 2);
transform: translateY(-50%);
left: 20px;
font-family: "Merriweather Sans", sans-serif;
font-weight: 300;
font-size: 16px;
pointer-events: none;
color: #777;
background: white;
transition: 0.2s ease all;
}
.input-field input:focus ~ label,
.input-field input:not(:focus):valid ~ label {
top: 0;
left: var(--input-field-padding-left);
color: #8c7d50;
}
.input-field input:focus {
outline: 1px solid yellowgreen; /* using outline istead of the border doesn't change the size of the input field */
box-shadow: 0 0 0 1px #8c7d50;
}

这是jsfield

如果你有任何问题，请大胆提出来。