0

I have tried implementing the following solution to correctly style invalid input, great it works on text type fields, however unfortunately it appears to be broken on tel and number fields in both Chrome and FireFox. Does anyone have any alternative solutions for this predicament?

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

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

Reference link:

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

Richard Lake
  • 1
  • 2

1 Answers1

1

It seems to work fine. Use a dot as input to see invalid and any number to see valid input.

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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • Thanks Gerard, I meant to write a 'tel' field which I thought was restricted to ()- but I can type text as normal. So now I have to some how restrict characters. – Richard Lake Jan 10 '20 at 11:06