CSS :invalid伪类异常求助：输入框空值误触发无效样式

问题核心：给input设置required属性后，空输入框会被浏览器判定为无效状态，直接触发:invalid伪类，导致空输入时边框变红，和需求冲突。

需求明确：

• 空输入框：边框为goldenrod
• 输入内容不符合pattern规则：边框变红
• 内容符合规则：边框变绿

解决方案：利用:not(:placeholder-shown)伪类筛选出「已输入内容」的状态，再结合:invalid，让红色边框仅在输入无效内容时生效。

修改后的SCSS代码：

.text-field__input {
  display: flex;
  width: 100%;
  height: 4.8rem;
  font-size: 1.6rem;
  border-radius: 4px;
  background-color: transparent;
  padding: 0 1.6rem;
  font-weight: bold;
  border: 3px solid goldenrod;

  &:focus {
    outline: none;
  }
  &:valid {
    border: 3px solid green;
  }
  /* 仅当输入框有内容且验证不通过时显示红色边框 */
  &:not(:placeholder-shown):invalid {
    border: 3px solid red;
  }
  &::placeholder {
    color: rgba($hextechgold2, 0.5);
    font-size: 0;
    transition: 0.3s;
  }

  &:focus::placeholder {
    font-size: 1.6rem;
  }
}

原理说明：

• :placeholder-shown伪类会在输入框为空且占位符处于可见状态时触发，:not(:placeholder-shown)则代表输入框已填写内容。
• 结合:invalid后，仅对「已填写但不符合规则」的输入框应用红色边框，空输入框保持默认的goldenrod，符合规则时:valid触发绿色边框，完全匹配需求。

内容的提问来源于stack exchange，提问作者Gin Ichimaru