ввод получить фокус на другом входе

Question

Я пытаюсь использовать этот ввод пользовательского интерфейса, но когда я нажимаю на область метки электронной почты (100% width метка электронной почты), она фокусируется на вводе имени

Я пытаюсь javascrip и отделяю код CSS дляввод не работает, потом я понимаю, что это из-за position, как я могу решить эту проблему?

это мой код:

.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>

Answer 1

на случай, если вам просто нужно изменить имя входа и метку for=, связанную с ним

.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>

Answer 2

Изменение идентификатора входной электронной почты и его метки для атрибутов

.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="mail" required autocomplete="off" />
    <label class="label" for="mail">Email</label>
    <div class="bar"></div>
  </div>
</div>

Answer 3

Вы забыли назначить другой идентификатор 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>