如何摆脱 Chrome 和 Firefox 中的文本表单边框？答案

【问题标题】：How to get rid of text form borders in Chrome and Firefox?如何摆脱 Chrome 和 Firefox 中的文本表单边框？
【发布时间】：2015-04-14 15:57:47
【问题描述】：

我在我的 HTML 和 CSS 中创建了一些文本表单，它们在 Safari 中似乎工作得很好，但在 Firefox 和 Chrome 中，它们周围看起来像是 1 到 2 像素的白色边框。这是该浏览器样式的默认设置吗？我该如何摆脱它？

这是我的 CSS 仅供参考....

.forms input[type="text"] {
display:block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#3a3a3a;
color: white;
padding-right:30px;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:540px;
}
.shortForms input[type="text"] {
display:inline-block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#3a3a3a;
color: white;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:242px; 
}

这是一个黑色背景的页面，文本字段是带有白色占位符文本的浅灰色阴影。

提前感谢您的帮助！

【问题讨论】：

标签： css forms border

【解决方案1】：

尝试添加

fieldset { border: 0px; }

到您的 CSS。

【讨论】：

这似乎不起作用......但我确实添加了 {border: 0px; } 到每个表单类，这似乎做到了。我应该早点尝试的。 Chrome 和 Firefox 必须默认添加它们。很高兴知道。不过感谢您的回答！你让我走上了正轨！