1

如果我在文本输入的样式中指定背景颜色，例如通过 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 特定的问题。任何人都可以建议一种方法来避免这种情况，同时保留控件的“默认”外观吗？我想要的只是没有凹陷外观的背景颜色。

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

编辑：为了明确这个问题，我不希望对我看到的第二个输入产生下沉效果，如下所示：

在此处输入图像描述

4

3 回答 3

2

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

如果您的意图是有一个坚实的风格边框，你应该能够做到：

.error{border-style: solid;}

jsFiddle

于 2013-04-03T21:34:06.397 回答
1

首先，这也是 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。

于 2013-04-03T21:39:40.387 回答
0

为了准确地解决这个特定问题并避免覆盖您可能为其他输入定义的任何其他边框宽度或颜色，您可以只为接受文本的输入（text, password, email, search,tel和)urltextarea

input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], textarea {
    border-style: solid;
}
于 2013-04-03T22:50:16.933 回答