Question

我正在网站的顶部栏上设置搜索字段，但我对其样式进行的所有尝试都失败了。 Topbar和topbar图标的背景颜色应为蓝色（＃6495ed），图标为白色（应为白色），但搜索容器保持白色。如何将其设置为蓝色？

由于将搜索输入和按钮放置在搜索容器（= div）中，因此我设置了按钮及其容器的背景：＃6495ed。我对它们的边距和填充进行了多次修改，但是我没有弄清楚适当的组合。

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

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

在Chrome和Firefox上是同样的问题。
我在运行MySQL 5.7.22，PHP 7.2.4和Apache 2.4.33（WampServer）的Windows 10上进行编码。

这是搜索字段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 */
}

顶栏和顶栏图标的背景颜色应为蓝色（＃6495ed），图标为白色（应为白色），但是搜索容器保持白色（这是问题所在）。

任何建议将不胜感激！已经感谢您的阅读！

最好的问候
塞缪尔

Answer 1

您可以在

内定义样式属性。

例如ubuntu 16.04 fa fa -car-是我上面使用过的字体真棒图标类。

只需在<i class="fa fa-car" style="font-size:60px;color:red;"></i>

内使用样式属性

Answer 2

塞缪尔。该代码似乎在本地工作。我在本地使用了JsFiddle代码，无法复制指定的问题。请参考所附的屏幕截图。请放心，您的代码可以正常运行。Click to view this image

[有时我们系统上的浏览器使情况变得混乱。建议检查一下是否已更新，甚至可以尝试重新安装浏览器。]

如何设置置于蓝色顶部栏中的搜索容器的背景颜色？

2 个答案: