删除输入标签下的灰色区域

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属性，因此您可以考虑将其删除。