指定背景色css时凹陷边框 - 如何避免？

Question

如果我在文本输入的样式中指定background-color，例如通过css中的错误类如下：

.error {
 background-color: #f88;
}

和HTML：

<p>
    Normal Input: <input type="text" />
</p>
<p>    
    Test Input: <input type="text" class="error" />
</p>

当应用类时，我最终会出现凹陷的边框效果，如果不是，则会产生平坦的效果，请参阅此处的示例：

http://jsfiddle.net/D4SEZ/5/

我只在Windows中测试过，因此它可能是Windows特定的问题。任何人都可以提出一种方法来避免这种情况，同时保留控件的“默认”外观吗？我想要的只是没有凹陷外观的背景颜色。

我真的不想明确地设置边框等样式。

编辑：为了清楚这个问题，我不希望我看到的第二个输入上的凹陷效果如下：

Answer 1

查看border-style property。输入元素通常具有默认为inset的边框样式，这是您所看到的。

如果你想要一个坚实的样式边框，你应该能够做到：

.error{border-style: solid;}

jsFiddle

Answer 2

首先，它也是mac / chrome的一个问题。默认输入边框似乎具有某种特殊边框。因为它在默认版本上有白色背景，所以几乎看不到它，但它就在那里。 Chrome检查员会显示：

-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;

要拥有真实的，跨浏览器，一致的外观，我认为您将不得不覆盖这些浏览器默认属性，不喜欢或不喜欢。但不应该很难：

input[type="text"] {
  border: 1x solid #ccc;
  outline: none;
  box-shadow: none;
  padding: 2px;
}

或者那个顺序的东西。也许您应该将其应用于input password和textarea。

Answer 3

要精确解决此特定问题并避免覆盖您可能为其他输入定义的任何其他边框宽度或颜色，您只需为接受文本的输入指定边框样式的css重置规则（{{1 }}，text，password，email，search，tel和url）

textarea