:user-invalid伪类基本使用实例页面

展示

代码

• HTML：

  <form id="csForm" novalidate>
      <p>验证码：<input class="cs-input" required pattern="\w{4,6}"></p>
      <input type="submit" value="提交">
  </form>

• CSS：

  .cs-input {
      width: 240px; height: 16px;
      padding: 10px;
      font-size: 100%;
      border: 1px solid transparent;
      background: #fff;
      box-shadow: inset 0 0 0 1px #ccc;
      outline: none;
      border-image: 0 fill / 9px 0 9px 272px / 0 30px 0 0;
  }
  .cs-input:focus {
      box-shadow: inset 0 0 0 1px #2a80eb;
  }
  .cs-input:user-valid {
      border-image-source: url(valid.svg);
  }
  .cs-input:user-invalid {
      border-image-source: url(invalid.svg);
  }