我尝试使用此代码创建自定义文本字段,如材质设计。我不知道我将如何处理错误,因为当您尝试在文本字段的标签(您的电子邮件)的确切位置单击时,文本字段不允许我键入。但是当您尝试在文本字段的标签外单击时,它将允许您键入。我要做的是当你在标签外面或标签的确切位置点击时,文本字段将允许你输入。
<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 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;
}
使用<label for="email">
而不是span
。
id
是与<label>
元素在同一文档中的可变形式相关元素的for
。文档中第一个id与for
属性值匹配的元素是此label元素的标记控件(如果它是一个可标记元素)。如果它不是可标记的,则.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; }
属性不起作用。如果还有其他元素也与id值匹配,则稍后在文档中,不会考虑它们。
<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>
qazxswpoi