I am facing a challenge with styling my invalid elements in HTML forms. It is simple in Chrome, but Firefox seems not to recognize my :invalid pseudoclass. To see the difference, try opening the following code snippet in both Chrome and Firefox:
<html>
<head>
<style type='text/css'>
:invalid{
color:#FF0000;
};
</style>
</head>
<body>
<form>
This box validates on inputs between 0 and 100:
<input class='myInput' type='number' min='0' max='100'>
</form>
</body>
</html>
When you enter 101 into the input box, Chrome will turn it red while Firefox will not react. Any thoughts or suggestions on how to address this inconsistency between browsers?