css - 去除 input 标签下的灰色区域

Question

可能是一个简单的问题，但目前让我感到难过。我有一个输入标签(文本)，它奇怪地在表单内的任何内容周围设置了灰色背景。下图显示了该问题。

另请参阅下面的代码:

<form type="submit" action="#">
    <input name="location" type="text" class="form-control" placeholder="location"/>
    <input type="submit" value="Search" class="btn btn-success mt-2"/>
</form>

我使用的是没有修改的 Bootstrap 4。

奇怪的是，当使用 Google Chrome、Safari 或 Mozilla Firefox 进行检查时，灰色区域完全消失，表单看起来完全像它应该的那样。

当删除提交标签时，灰色区域消失，任何其他包含的标签似乎得到相同的结果，因此我认为是文本输入导致了问题。

感谢任何帮助，如果您需要任何进一步的信息，请告诉我。

Answer 1

使用 type="form"在 <form> 上设置 CSS -webkit-appearance: button; ，这使得整个表单看起来像一个按钮。

reboot.scss，第 359 行:

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}

参见 appearance .

Forms通常没有 type属性，因此您可以考虑将其删除。