textarea元素输入验证兼容版实例页面

展示

代码

• HTML：

  <div class="form">
      <textarea placeholder="请输入姓名" required></textarea>
      <label>请输入姓名</label>
  </div>

• CSS：

  .form {
      position: relative;
      padding-top: 20px;
  }
  .form label {
      position: absolute;
      color: gray;
      font-size: 12px;
      top: 0; left: 0;
  }
  textarea {
      width: 100%;
  }
  textarea:not(:empty):invalid + label {
      visibility: hidden;
  }
  textarea:placeholder-shown + label {
      visibility: hidden;
  }