Firebug聲稱無格式文本框是邊框：3px插圖＃F0F0F0;Firefox/Safari中的默認文本框外觀
然而，<input type="textbox" style="border: 3px inset #F0F0F0;" />和<input type="textbox" />產生非常不同的外觀邊界。這裏發生了什麼？
在Safari，Chrome和Firefox中都是如此 - 我沒有IE，所以我不知道這一點。
它是如何工作的：如果appearance/-moz-appearance/-webkit-appearance屬性被設置爲none其他的東西 - 作爲它是<input type="text">在瀏覽器的默認樣式，然後一個元素的正常的CSS邊框/背景被丟棄有利於特定於平臺的主題，這些主題可能與平常的舊CSS所提供的平面3D對象看起來有所不同。
<div style="-moz-appearance: textfield">x</div>
<input style="-moz-appearance: none" value="x"/>
奇數和爲遠-AS-I-可以-告訴-無證美中不足的是，如果在所有任何background或border規則已經在元素上設置，其-moz-appearance被忽略，none被取代，導致您在示例中看到的平面3D邊框樣式，這是沒有主題的輸入。
即使這些規則不會導致這些樣式的計算值不同於沒有這些樣式的計算值，也是如此。只有background: default; border: default可避免觸發此行爲。
（IE同樣的行爲，但它不公開的appearance風格。另外，XP/2000「經典」主題的用戶將不會看到一個區別，因爲IE瀏覽器呈現CSS inset/outset邊框的樣式在這樣的無論如何，它匹配'經典'Windows風格。）
不同操作系統上的不同瀏覽器將具有各種默認窗體控件樣式以匹配操作系統的UI。一旦你開始設計任何表單元素，那麼你會注意到瀏覽器也會添加它自己的默認樣式（你可以覆蓋它）。
Firebug可能只是報告文本框的特定默認瀏覽器樣式，但它不可見，因爲它們不是該元素的其他樣式，因此正在使用OS UI。
好的答案，我很難弄清楚這一點，但你已經說清楚了。對於表單，我最大的抱怨就是你不能設計type =「file」的輸入 - 這實際上可能會混淆了表單的外觀，特別是當你花時間對所有其他輸入進行樣式設置時。 – stephenmurdoch 2010-07-02 23:13:50
是的，文件上傳字段是一個自己的法律。儘管自定義樣式表單字段通常很困難並且通常最好避免，但您至少可以設置字段的寬度以使它們排列得很好，這比可以爲文件上載進行管理的情況要好。 – bobince 2010-07-03 17:39:47