0

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?

Mike
  • 2,862
  • 10
  • 42
  • 55
  • 2
    Certainly seems like a browser bug. There's no reason why it should be different when you have external CSS over inline. Looking at it in the inspector it seems that the rule should be applying, and the validity state on the DOM is getting set correctly. – robertc Jul 16 '10 at 18:28
  • What other browsers should this currently work with? – MrWhite Jul 17 '10 at 00:05
  • If you disable and immediately enable this :invalid style in the Element Inspector and switch back to the page (you can close the Element Inspector if you wish) then it now works! So it seems _something_ is not being _triggered_ initially?! – MrWhite Jul 17 '10 at 00:15
  • Agreed that it looks like a browser bug. Submit a bug report to the chromium project! (or check if they already have a bug open for this issue) – Denilson Sá Maia Jul 17 '10 at 14:26

1 Answers1

0

It appears to have been resolved in latest versions of Chrome.

Mike
  • 2,862
  • 10
  • 42
  • 55