定制材料设计表格（前端）答案

【问题标题】：Custom Made Material Design Form (FrontEnd)定制材料设计表格（前端）
【发布时间】：2019-03-28 05:05:47
【问题描述】：

我尝试使用此代码创建自定义文本字段，如材料设计。我不知道我将如何处理该错误，因为当您尝试单击它的标签（您的电子邮件）的确切位置中的文本字段时，文本字段不允许我输入。但是当您尝试在文本字段的标签之外单击时，它将允许您输入。我想要做的是，当您单击标签外部或标签的确切位置时，文本字段将允许您输入。

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

当我尝试点击标签（您的电子邮件）时，图片不允许我输入

Click on the label -image

当我尝试点击标签外部时，图片允许我输入

Click outside the label -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;
  }

【问题讨论】：

标签： html css

【解决方案1】：

使用<label for="email"> 而不是span。

与 <label> 元素。文档中与 id 匹配的第一个元素 for 属性的值是该标签的标签控件元素，如果它是可标记元素。如果它不可标记，则 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>

【讨论】：