填写详细信息后输入字段动画问题

Question

大家好，希望你们都做得很好，我正在为我的 reactjs 应用程序输入字段的 css 部分寻求帮助。谁能帮我解决一下。

我的问题是我想以占位符指示输入详细信息的方式制作一个动画输入字段，因此在关注输入字段时，占位符将移动到输入字段的顶部，我将能够填写详细信息。但是在填充详细信息后将指针聚焦在输入字段之外后，占位符会重叠。如何解决将其从重叠中删除的问题。

以下是图片供参考

这是 App.js：

<input className='input_field' type="number" name="number" placeholder=''
                                autoComplete='off'
                                value={formValues.number}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                        />
 <label className='input_label'>Mobile Number</label>

这是对应的App.css：

.input_field{
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  font-size: 16px;
}
.input_label{
  position: absolute;
  left: 605px;
  top: 296px;
  pointer-events: none;
  font-size: 16px;
}
.input_field:focus{
  border-color: crimson;
}
.input_field:focus + .input_label{
  top: 275px;
  transition: 0.3s;
  color: crimson;
}

我已经尝试添加这个

.input_field:valid + .input_label

随着

.input_field:focus + .input_label{
      top: 275px;
      transition: 0.3s;
      color: crimson;
    }

但没有任何改变

有人可以帮我解决我遇到的问题吗？

Answer 1

.input_field{
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  font-size: 16px;
}
.input_label{
  position: absolute;
  left: 20px;
  top: 20px;
  pointer-events: none;
  font-size: 16px;
}
.input_field:focus{
  border-color: crimson;
}
.input_field::placeholder {
  color: #fff;
  opacity: 1; /* Firefox */
}

.input_field:-ms-input-placeholder { 
 color: #fff;
}

.input_field::-ms-input-placeholder { 
 color: #fff;
}
.input_field:not(:placeholder-shown) ~ label {
      top: 275px;
      transition: 0.3s;
      color: crimson;
}

<input className='input_field' type="number" name="number" placeholder='enter number'
                                autoComplete='off'
                                value={formValues.number}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                        />
 <label className='input_label'>Mobile Number</label>

//你必须添加占位符文本并在css下面尝试