Html 输入将焦点放在另一个输入上

我尝试使用此UI输入，但当我单击电子邮件标签区域（100%

width

email label）时，它将重点放在名称输入上

我试着用javascrip将css代码分离出来作为输入，但它不起作用，然后我意识到 这是因为

位置

，如何解决此问题

这是我的代码：

.centered名称{
宽度：50%；
保证金：自动；
}
.以电子邮件为中心{
宽度：75%；
保证金：自动；
}
.组{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
.标签{
位置：绝对位置；
顶部：40px；
颜色：#666666；
字体：400 26px Roboto；
光标：文本；
过渡：0.3s；
宽度：100%；
文本对齐：居中；
}
.输入{
显示：块；
宽度：100%；
填充顶部：36px；
边界：无；
边界半径：0；
字体大小：30px；
过渡：放松；
文本对齐：居中；
}
.input:有效~.标签{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点{
大纲：无；
}
.input:focus~.label{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点~。栏：前{
变换：translateX（0）；
}
.酒吧{
边框底部：2个实心#ff5126；
宽度：100%；
边缘顶部：6px；
过渡：放松；
}
.input:有效~.bar{
边框底部：2px实心#3bb873；
}

名称
电子邮件

您忘了为

输入指定不同的id
电子邮件，也忘了为
标签指定
for=“email”
。请尝试以下内容：


.centered名称{
宽度：50%；
保证金：自动；
}
.以电子邮件为中心{
宽度：75%；
保证金：自动；
}
.组{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
.标签{
位置：绝对位置；
顶部：40px；
颜色：#666666；
字体：400 26px Roboto；
光标：文本；
过渡：0.3s；
宽度：100%；
文本对齐：居中；
}
.输入{
显示：块；
宽度：100%；
填充顶部：36px；
边界：无；
边界半径：0；
字体大小：30px；
过渡：放松；
文本对齐：居中；
}
.input:有效~.标签{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点{
大纲：无；
}
.input:focus~.label{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点~。栏：前{
变换：translateX（0）；
}
.酒吧{
边框底部：2个实心#ff5126；
宽度：100%；
边缘顶部：6px；
过渡：放松；
}
.input:有效~.bar{
边框底部：2px实心#3bb873；
}

名称
电子邮件
以防您只需更改输入的名称以及与之关联的标签=


.centered名称{
宽度：50%；
保证金：自动；
}
.以电子邮件为中心{
宽度：75%；
保证金：自动；
}
.组{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
.标签{
位置：绝对位置；
顶部：40px；
颜色：#666666；
字体：400 26px Roboto；
光标：文本；
过渡：0.3s；
宽度：100%；
文本对齐：居中；
}
.输入{
显示：块；
宽度：100%；
填充顶部：36px；
边界：无；
边界半径：0；
字体大小：30px；
过渡：放松；
文本对齐：居中；
}
.input:有效~.标签{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点{
大纲：无；
}
.input:focus~.label{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点~。栏：前{
变换：translateX（0）；
}
.酒吧{
边框底部：2个实心#ff5126；
宽度：100%；
边缘顶部：6px；
过渡：放松；
}
.input:有效~.bar{
边框底部：2px实心#3bb873；
}

名称
电子邮件
更改您输入的电子邮件Id及其attibutes标签


.centered名称{
宽度：50%；
保证金：自动；
}
.以电子邮件为中心{
宽度：75%；
保证金：自动；
}
.组{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
.标签{
位置：绝对位置；
顶部：40px；
颜色：#666666；
字体：400 26px Roboto；
光标：文本；
过渡：0.3s；
宽度：100%；
文本对齐：居中；
}
.输入{
显示：块；
宽度：100%；
填充顶部：36px；
边界：无；
边界半径：0；
字体大小：30px；
过渡：放松；
文本对齐：居中；
}
.input:有效~.标签{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点{
大纲：无；
}
.input:focus~.label{
顶部：3px；
字体：400 26px Roboto；
}
.输入：焦点~。栏：前{
变换：translateX（0）；
}
.酒吧{
边框底部：2个实心#ff5126；
宽度：100%；
边缘顶部：6px；
过渡：放松；
}
.input:有效~.bar{
边框底部：2px实心#3bb873；
}

名称
电子邮件
id应该是唯一的，您不能复制id使用复制粘贴时会发生这种情况，谢谢：）