Блог

Я попытался использовать этот код для создания пользовательского текстового поля, подобного material design. Я не знаю, как мне поступить с ошибкой, потому что, когда вы пытаетесь щелкнуть по текстовому полю в точном местоположении метки (вашего электронного письма), текстовое поле не позволяет мне вводить. Но когда вы пытаетесь щелкнуть за пределами метки текстового поля, это позволит вам ввести. Что я пытаюсь сделать, так это то, что когда вы нажимаете за пределами метки или в точном месте метки, текстовое поле позволит вам ввести текст.

  <div class="form__group">
 <input type="email" id="email" class="form__field" placeholder="Your Email">
 <span for="email" class="span-header form__label">Your Email</span>
</div>
  

Изображение не позволяет мне печатать, когда я попытался нажать на ярлык (ваш Email)

Нажмите на ярлык -изображение

Изображение позволяет мне печатать, когда я пытаюсь щелкнуть за пределами метки

Щелкните за пределами ярлыка -изображение

CSS:

 .form__group {
 position: relative;
 padding: 15px 0 0;
 margin-top: 10px;
 }

.form__field {
 font-family: inherit;
 width: 100%;
 border: 0;
 border-bottom: 1px solid #d2d2d2;
 outline: 0;
 font-size: 16px;
 color: #212121;
 padding: 7px 0;
 background: transparent;
 transition: border-color 0.2s;
 }

 .form__field::-webkit-input-placeholder {
  color: transparent;
  }

  .form__field:-ms-input-placeholder {
  color: transparent;
  }

 .form__field::-ms-input-placeholder {
  color: transparent;
  }

 .form__field::placeholder {
  color: transparent;
  }

 .form__field:placeholder-shown ~ .form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
 }

.span-header,
.form__field:focus ~ .form__label {
 position: absolute;
 top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
 color: #9b9b9b;
 }

 .form__field:focus ~ .form__label {
  color: #009788;
 }

.form__field:focus {
 padding-bottom: 6px;
  border-bottom: 2px solid #009788;
  }
  

Используйте <label for="email"> вместо span .

id Элемента, связанного с формой, с возможностью маркировки в том же документе, что и <label> элемент. Первый элемент в документе с идентификатором, соответствующим значению for атрибута, является элементом управления labeled для этого элемента label, если он является элементом labelable. Если она не помечается, то for атрибут не имеет эффекта. Если есть другие элементы, которые также соответствуют значению id, позже в документе они не рассматриваются.

 .form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  outline: 0;
  font-size: 16px;
  color: #212121;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::-webkit-input-placeholder {
  color: transparent;
}

.form__field:-ms-input-placeholder {
  color: transparent;
}

.form__field::-ms-input-placeholder {
  color: transparent;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown~.form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
}

.span-header,
.form__field:focus~.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  color: #9b9b9b;
}

.form__field:focus~.form__label {
  color: #009788;
}

.form__field:focus {
  padding-bottom: 6px;
  border-bottom: 2px solid #009788;
}  

 <div class="form__group">
  <input type="email" id="email" class="form__field" placeholder="Your Email">
  <label for="email" for="email" class="span-header form__label">Your Email</label>
</div>