样式：在 Tel 字段上无效，无法按预期工作

Question

我已经尝试实施以下解决方案来正确设置无效输入的样式，它适用于文本类型字段，但不幸的是，它似乎在 Chrome 和 FireFox 中的电话和数字字段上被破坏了。有没有人有解决这种困境的替代方案？

form.standard-form.enhanced {
    input:not(:placeholder-shown):invalid {
        border: 2px solid #f00;
    }

    input:not(:placeholder-shown):valid {
        border: 2px solid $green;
    }
}

参考链接：

https://stackoverflow.com/questions/7920742/delay-html5-invalid-pseudo-class-until-the-first-event#=

Answer 1

它似乎工作正常。使用点作为输入来查看无效，使用任何数字来查看有效输入。

form.standard-form.enhanced input:not(:placeholder-shown):invalid {
  border: 2px solid red;
}

form.standard-form.enhanced input:not(:placeholder-shown):valid {
  border: 2px solid green;
}

<form class="standard-form enhanced">
  <input type="number" placeholder="0">
</form>