html - 如何使 textarea 边框与文本输入边框相同？

Question

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

所以我知道我可以使用

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

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

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

score 17 · Accepted Answer

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

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;
}

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

score 4 · Accepted Answer

接受的答案是正确的，但现在有点过时了。作为设置边框样式、边框颜色和边框宽度的替代方法，您可以使用外观让控件保持其原始外观，并带有前缀：

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

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

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

score 1 · Accepted Answer

1

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

于 2013-01-14T21:09:56.643 回答

3 回答 3