樣式：在電話字段上無效，無法按預期工作

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>