如何使文本区域边框与文本输入边框相同？

Question

我想让我的表单中的 textarea 字段与跨浏览器的文本输入字段显示相同。而且我不想强制使用自定义样式 - 我只想使用用户浏览器中的任何标准样式。

所以我知道我可以使用

textarea {
    border-style: inset;
    border-width: 2px;
}

然后它们会在 Chrom[e,ium] 中匹配，但是它们在 Firefox/Iceweasel 中不匹配，例如。

那么有没有一种直接的方式对浏览器说“请渲染 textarea 带有你用于 input[type="text"] 的任何边框的元素”？

原文由 lxop 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实际提出的问题的答案是：不，没有办法说“让这个元素看起来像这个”。但是，您可以通过对文本区域和输入应用相同的样式来使它们看起来一致。但是，在某些浏览器中，某些东西看起来是特定的，并且没有办法绕过它。

 input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}

HTML5 中引入了除“文本”之外的其他输入类型。例如，“密码”、“数字”和“电子邮件”输入类型看起来像“文本”输入但具有特殊行为。为了使它们看起来一致，您需要在您的 css 中为每个输入类型提供定义。

 input[type=text], input[type=password], input[type=email], input[type=number], textarea    {
    border-style: inset;
    border-width: 2px;
}

有关可能的输入类型的完整列表，请参阅 此处的参考资料。

原文由 Jeffrey Ray 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

接受的答案是正确的，但现在有点过时了。作为设置 border-style、border-color 和 border-width 的替代方法，您可以使用带有前缀的 appearance 让控件保持其原生外观：

 input[type="text"],
textarea {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

这将确保您的文本区域和文本字段匹配（*在一些浏览器中）。如果你喜欢 textarea 看起来更好，你可以做同样的事情，但用值 textarea 代替。

所有使用前缀的警告都适用。

原文由 Macneil Shonle 发布，翻译遵循 CC BY-SA 3.0 许可协议