定制材料设计表格(FrontEnd)

Question

我试着使用这段代码来创建一个定制的文本字段，比如材料设计。我不知道我将如何处理错误，因为当您试图单击textfield的标签(您的电子邮件)的确切位置，文本字段不允许我键入。但是，当您尝试单击textfield的标签外时，它将允许您键入。我要做的是，当您单击标签外部或标签的确切位置时，textfield将允许您键入。

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

图片不允许我键入，当我试图点击标签(你的电子邮件)

单击标签-image

图片允许我在尝试单击标签外部时键入

单击标签外的-image

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;
  }

Answer 1

使用而不是span。

与id元素相同的文档中可标记窗体相关元素的<label>。文档中具有与for属性值匹配的id的第一个元素是此label元素的标记控件(如果它是一个可标记元素)。如果它是不可标记的，那么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>

​