I don't know if this could be some sort of bug in Chrome or (more than likely) it is me doing something wrong. I am trying to make a textbox background color turn red if what is entered is not a number.
I have this html page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iSPT</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<form >
<input type="number" autofocus />
</form>
</body>
</html>
And this is style2.css:
@CHARSET "ISO-8859-1";
:invalid{
background-color: red;
}
This does not work as shown above(the box does not turn red if I enter letters). There are two ways I have gotten it to work. The first was by removing the autofocus attribute from the input.
Alternatively if I put the CSS from the external file inline in the HTML head, the validation works then as well.
I would like to be able to keep the autofocus and the external css sheet though.
Any ideas?