html - 定制材料设计表格（前端）

Question

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

 <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

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

标签： htmlcss

Answer 1

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

与元素在同一文档中的id可标记表单相关元素的 <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>