html - 如何设置放入蓝色顶栏的搜索容器的背景颜色？

Question

我正在我网站的顶部栏上设置一个搜索字段，但我对它进行样式设置的所有尝试都失败了。顶部栏和顶部栏图标的背景颜色应该是蓝色(#6495ed)，图标是白色(应该是)，但搜索容器保持白色。如何设置为蓝色？

由于搜索输入和按钮放置在搜索容器(= 一个 div)中，因此我设置了按钮及其容器的背景:#6495ed。 margin, padding 修改了好几遍，一直没找到合适的组合。

我已经设置了一个 JsFiddle 并且很奇怪，我无法在 JsFiddle 中重现该问题!为什么，奇怪不是吗？ https://jsfiddle.net/r5uqb8v0/1/

所以这张图应该可以说明。
https://drive.google.com/file/d/1idQKbtKHaOT-QXByAMw1tXR9l9owMUlc/view?usp=sharing

在 Chrome 和 Firefox 上也是同样的问题。
我在 Windows 10 上编写代码，运行 MySQL 5.7.22、PHP 7.2.4 和 Apache 2.4.33 (WampServer)。

这是搜索字段 HTML:

<div class="item3 search-container">
  <form action="/action_page.php">
   <input type="text" placeholder="Search..." name="search">
   <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

至于CSS:

.topnav .search-container {
  border: none;
  outline: none;
  color: inherit;
  padding: 0;
  float: right;
  background: #6495ed;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}
.topnav .search-container input {
  padding: 0px;
  margin: 0;
  border: none;
  font-size: 1em;
  display: none;
  width: 100%; /* Full width */
  cursor: pointer;
}
.topnav .search-container button {
  font-size: 1.875em;
  border: none;
  outline: none;
  color: white;
  padding: 6px 10px;
  background: #6495ed;
  margin: 0;
  display: inline;
  cursor: pointer;
  width: 100%; /* Full width */
}

Topbar 和 topbar 图标背景颜色应该是蓝色 (#6495ed)，图标是白色(应该是)，但搜索容器保持白色(这是问题所在)。

任何建议将不胜感激!感谢您的阅读!

最好的问候
塞缪尔

Answer 1

塞缪尔。看来代码在本地有效。我在本地使用了您的 JsFiddle 代码，无法复制指定的问题。请参阅随附的屏幕截图。请放心，您的代码可以正常工作。 Click to view this image

[有时我们系统上的浏览器会使情况变得困惑。建议检查它是否更新，您甚至可以尝试重新安装浏览器。]