In IE7, clicking the textbox below changes the border to inset.
It works fine in the latest FireFox, but not in v3.0.10
<html>
<head></head>
<body>
<input type="text" readonly="readonly" value="hello" onclick="this.style.backgroundColor='white';" />
</body>
</html>
Strange quirk.
For those with IE8, is it fixed?
My workaround is to reset the border using this.style.border = "1px solid black;"
Browsers I've tested: Opera 10.70, Firefox 3.6.9, IE 8.0 changes to inset. Webkit (Chrome 5.0.375.70 and Safari 5.0.2) also changes to inset but only when color to set is different than current color.
Every browser has different look of their controls, I call it a default look. You can customize control (e.g. change color of its background), then it changes to, what I call, a customizable look. It changes its properties to standard, editable by CSS, which should look the same on every browser. Default property for border-style of customizable-looking input-type=text is "inset".
Similar mechanism affects customizing scrollbars. If you set a color, scrollbar will be rectangular, because only then it can be colored.
Your input isn't contained within a form element and thus isn't standards compliant. Try that first before digging into cross-browser handling for such an edge case.