如何使textarea边框与文本输入边框相同?

lxo*_*xop 10 html css

我希望我的表单中的textarea字段与文本输入字段相同,跨浏览器.而且我不想强制自定义样式 - 我想在用户的浏览器中使用任何标准样式.

所以我知道我可以使用

textarea {
    border-style: inset;
    border-width: 2px;
}
Run Code Online (Sandbox Code Playgroud)

然后他们会在Chrom [e,ium]中匹配,但是他们在Firefox/Iceweasel上不匹配.

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

Jef*_*Ray 16

提出的实际问题的答案是:不,没有办法说"让这个元素看起来像这个".但是,通过对textarea和输入应用相同的样式,可以使它们看起来一致.虽然,在某些浏览器中,某些事情看起来有某种方式,并且没有办法绕过它.

input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}
Run Code Online (Sandbox Code Playgroud)

除了"text"之外的其他输入类型在HTML5中引入.例如,"password","number"和"email"输入类型看起来像"文本"输入但具有特殊行为.要使所有这些看起来一致,您需要为css中的每个输入类型提供定义.

input[type=text], input[type=password], input[type=email], input[type=number], textarea    {
    border-style: inset;
    border-width: 2px;
}
Run Code Online (Sandbox Code Playgroud)

有关可能的输入类型的完整列表,请参考以下内容.

  • 我担心情况可能如此.但我想情况是用户将最习惯他们的浏览器风格,所以微观管理就像我建议的那样,无论如何都是一个愚蠢的想法. (3认同)