浮动标签与输入字段的电子邮件类型上的文本重叠

Question

我有一个带有浮动标签的表单，我正在检查输入是有效还是焦点，以提升输入字段上方的浮动标签。但是当我在输入字段的电子邮件类型上有一些无效输入时，如果我对该字段失去焦点，则浮动标签会与文本重叠。这是模板：

    <div v-if="input.type != 'submit' && input.type != 'textarea'" class="control">
      <input
        :ref="input.label.toLowerCase()"
        class="input is-large"
        :type="input.type"
        :name="input.label.toLowerCase()"
        :required="input.required == 1">
      <label>{{ input.label }}</label>
    </div>
    <div v-if="input.type == 'textarea'" class="control">
      <textarea
        :ref="input.label.toLowerCase()"
        class="textarea"
        :name="input.label.toLowerCase()">
      </textarea>
      <label>{{ input.label }}</label>
    </div>

这就是css：

input:focus { outline:none;}

label {
  color: #999;
  font-size: 1rem;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 20px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

input:focus ~ label, input:valid ~ label, textarea:valid ~ label, textarea:focus ~ label{
  top: -20px;
  font-size: 0.8rem;
}

有没有办法检查输入是否有css值？