Html 填写输入字段后，标签留在顶部

发布于10月15日

我希望在我们以html格式填充输入数据后，标签保持在输入字段的顶部

我已经try 了在css中的有效函数，但无法实现该功能.

.txt_field input {
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}

.txt_field label {
  position: absolute;
  top: 65%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: .3s;
}

.txt_field input:focus~label {
  top: 0px;
  color: #0170C1;
}

<div class="txt_field">
  <i class="fa fa-user"></i>
  <input type="text" class="textbox" id="username" placeholder="">
  <label>PhoneNumber/Email</label>
</div>

我试了.txt_field input:focus ~valid次，但标签总是与输入数据重叠.

我可以做什么来使标签在输入字段填充后保持在顶部.

推荐答案

使用:placeholder-shown伪类来检测DOS输入是否被填充，并使用::placeholder伪元素 Select 器来隐藏不需要的占位符.

此外，为了更好地观看，您需要为.txt_field购买position:relative;美元.

除了~，还是用+比较好.

重要提示:输入标记必须具有非空的placeholder属性.

.txt_field{
    position:relative;
}

.txt_field input {
    width: 100%;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none;
}

.txt_field label {
    position: absolute;
    top: 65%;
    left: 5px;
    color: #adadad;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .3s;
}

.txt_field input:focus+label, .txt_field input:not(:placeholder-shown)+label {
    top: 0px;
    color: #0170C1;
}

.txt_field input::placeholder {
    color: transparent;
}

<div class="txt_field">
    <i class="fa fa-user"></i>
    <input type="text" class="textbox" id="username" placeholder="if empty will not work">
    <label>PhoneNumber/Email</label>
</div>