Forum Moderators: not2easy
input {
-moz-appearance: textfield;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
font: -moz-field;
text-rendering: optimizeLegibility;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
cursor: text;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
text-indent: 0;
-moz-user-select: text;
text-shadow: none;
}
ie, a 2 pixel inset border with color #ece9d8 (aka ThreeDFace). But load the most simple of HTML files, such as that below, and you will see they appear with a solid border, less than 1px, and of a blue color.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form>
<input id="myInput" type="text" />
</form>
</body>
</html>
<script type="text/javascript">
var myElem=document.getElementById("myInput")
var actualstyle=document.defaultView.getComputedStyle(myElem, "")
console.dir(actualstyle);
</script>
This is where it gets particularly weird - if I inspect them with Firebug, I’m told they have an inset border with a color of #ece9d8, but I can see right in the browser that isn't the case. The same with the Javascript in that file which reports on the computed style (which doesn’t surprise me as I expect Firebug uses that JS method to print out CSS info).
IE 7 is similar. Using the IE Web Developer toolbar, I'm told that an unstyled form input has a 2px border of color #00000, and a border-style of none. Yet the input looks exactly the same as in Firefox.
So basically, is there something over and above CSS that affects the rendering of unstyled form elements
If you use CSS reset, then you'll see FF3+ render the form as it is declared above. Without the time to look now, I can only suggest that the browser based CSS kicks in when some properties are declared within a reset.
I think handling forms is still one of the most tricky aspects of CSS design, due to the margins for difference between browsers, even in standards based browsers.
