我尝试使用此 UI 输入,但当我单击电子邮件标签区域(100% 宽度
电子邮件标签)时,它将聚焦于名称输入
我尝试javascrip并分离输入的css代码,但它不起作用,然后我意识到
这是因为位置
,我该如何解决这个问题?
这是我的代码:
.centered-name {
width: 50%;
margin: auto;
}
.centered-email {
width: 75%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid~.label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus~.label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus~.bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid~.bar {
border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
<div class="group">
<input type="text" minlength="3" dir="rtl" class="input" id="name" required autocomplete="off" />
<label class="label" for="name">Name</label>
<div class="bar"></div>
</div>
</div>
<div class="centered-email">
<div class="group">
<input type="email" class="input" id="name" required autocomplete="off" />
<label class="label" for="name">Email</label>
<div class="bar"></div>
</div>
</div>
最佳答案
您忘记将不同的 ID email
分配给 input
以及 for="email"
分配给 label
。请尝试以下操作:
.centered-name {
width: 50%;
margin: auto;
}
.centered-email {
width: 75%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid~.label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus~.label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus~.bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid~.bar {
border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
<div class="group">
<input type="text" minlength="3" dir="rtl" class="input" id="name" required autocomplete="off" />
<label class="label" for="name">Name</label>
<div class="bar"></div>
</div>
</div>
<div class="centered-email">
<div class="group">
<input type="email" class="input" id="email" required autocomplete="off" />
<label class="label" for="email">Email</label>
<div class="bar"></div>
</div>
</div>
关于html - 输入获得焦点到另一个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52294011/