Html 如何使 textarea 边框与文本输入边框相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14326623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make textarea border the same as text input border?
提问by lxop
I would like to have the textarea fields in my form appear the same as the text input fields, cross-browser. And I don't want to be forcing a custom style - I would like to just use whatever the standard style is within the user's browser.
我希望表单中的 textarea 字段与跨浏览器的文本输入字段相同。而且我不想强制使用自定义样式 - 我只想使用用户浏览器中的任何标准样式。
So I know I could use
所以我知道我可以使用
textarea {
border-style: inset;
border-width: 2px;
}
and then they would match in Chrom[e,ium], but then they don't match on Firefox/Iceweasel, for example.
然后它们会在 Chrom[e,ium] 中匹配，但是它们在 Firefox/Iceweasel 上不匹配，例如。
So is there a straightforward way to say to the browser "please render textareaelements with whatever border you are using for input[type="text"]"?
那么有没有一种直接的方法可以对浏览器说“请textarea使用您使用的任何边框渲染元素input[type="text"]”？
回答by Jeffrey Ray
The answer to the actual question posed is: No, there is no way to say "make this element look like this one." However, you can make them look consistent by applying the same style to both the textarea and the input. Though, in some browsers certain things look a certain way and there is no way around it.
实际问题的答案是：不，没有办法说“让这个元素看起来像这个元素”。但是，您可以通过对 textarea 和 input 应用相同的样式来使它们看起来一致。但是，在某些浏览器中，某些事物看起来是特定的，并且无法绕过它。
input[type=text], textarea {
border-style: inset;
border-width: 2px;
}
Other input types besides "text" were introduced in HTML5.For instance there are the "password", "number", and "email" input types that look like "text" inputs but have special behaviors. To make all of them look consistent, you will need to provide definitions for each input type in your css.
HTML5 中引入了除“文本”之外的其他输入类型。例如，“密码”、“数字”和“电子邮件”输入类型看起来像“文本”输入，但具有特殊的行为。为了使它们看起来一致，您需要为 css 中的每个输入类型提供定义。
input[type=text], input[type=password], input[type=email], input[type=number], textarea {
border-style: inset;
border-width: 2px;
}
For a full list of the possible input types, here is a reference.
有关可能的输入类型的完整列表，请参阅参考资料。
回答by Macneil Shonle
The accepted answer is correct, but a little bit dated now. As an alternative to setting the border-style, border-color, and border-width you can have the controls keep their native look by using appearance, with its prefixes:
接受的答案是正确的，但现在有点过时了。作为设置边框样式、边框颜色和边框宽度的替代方法，您可以通过使用外观及其前缀来让控件保持其原生外观：
input[type="text"],
textarea {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
That will ensure your text areas and text field match (*in a few browsers). If you like the textarea look better, you can do the same but with the value textareainstead.
这将确保您的文本区域和文本字段匹配（* 在一些浏览器中）。如果你喜欢 textarea 看起来更好，你可以做同样的事情，但用值textarea代替。
All of the caveats with using prefixes apply.
所有使用前缀的警告都适用。
回答by Willem Ellis
input[type=text], textarea {
border-style: inset;
border-width: 2px;
}
