输入类型设置为“电子邮件”时，带有CSS的浮动标签不起作用 [英] Floating Labels with CSS not working when input type is set to Email

问题描述

当我们键入标签浮动到顶部时，我有一个输入文本框。当输入类型为文本时，它可以正常工作，但是如果输入文本框设置为电子邮件，则它将停止工作，我需要一种解决方案来使其工作。

I'm having an input textbox when we type something the label floats to the top. it works fine when the input type is "text" but if the input textbox is set to type "Email" it stops working, I need a solution to make it work.

.relPos {
  position: relative;
}

.upLabel {
  position: absolute;
  top: 0px;
  left: 0;
  transition: .3s;
  pointer-events: none;
}

.upInputs input {
  box-shadow: none;
}

.upInputs input:focus~.upLabel,
.upInputs input:valid~.upLabel {
  top: -15px;
  border: none;
}

<br>
<div class="relPos upInputs">
  <input type="text" required>
  <label class="upLabel">Type="Text"</label>
</div>
<br>
<div class="relPos upInputs">
  <input type="email" required>
  <label class="upLabel">Type="Email"</label>
</div>

<br>

>

推荐答案

：valid 仅在输入有效时才会触发因此您需要一封电子邮件（ [e-mail] ）才能正常工作。相反，您可以考虑使用：placeholder-shown ^ref 并有一个空的占位符：

:valid will only get triggered when the input is valid so you need an email ([e-mail]) for it to work. Instead, you can consider using :placeholder-shown ^ref and have a empty placeholder:

.relPos {
  position: relative;
}

.upLabel {
  position: absolute;
  top: 0px;
  left: 0;
  transition: .3s;
  pointer-events: none;
}

.upInputs input {
  box-shadow: none;
}

.upInputs input:focus~.upLabel,
.upInputs input:not(:placeholder-shown)~.upLabel {
  top: -15px;
  border: none;
}

<br>
<div class="relPos upInputs">
  <input type="text" required placeholder=" ">
  <label class="upLabel">Type="Text"</label>
</div>
<br>
<div class="relPos upInputs">
  <input type="email" required placeholder=" ">
  <label class="upLabel">Type="Email"</label>
</div>

<br>

>

用来说明问题：有效

.relPos {
  position: relative;
}

.upLabel {
  position: absolute;
  top: 0px;
  left: 0;
  transition: .3s;
  pointer-events: none;
}

.upInputs input {
  box-shadow: none;
}

.upInputs input:valid~.upLabel {
  top: -15px;
  border: none;
}

<div class="relPos upInputs">
  <input type="email" required value="not an email">
  <label class="upLabel">Type="Email"</label>
</div>
<br>
<div class="relPos upInputs">
  <input type="email" required value="[e-mail]">
  <label class="upLabel">Type="Email"</label>
</div>

这篇关于输入类型设置为“电子邮件”时，带有CSS的浮动标签不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！