flex布局让图标输入框并列同一行示例并覆盖相同背景色

可以使用Flex布局来实现图标和输入框并列在同一行，并且覆盖相同的背景色。以下是一个示例代码：

HTML:

<div class="container">
  <div class="icon">
    <i class="fa fa-search"></i>
  </div>
  <input type="text" class="input-field">
</div>

CSS:

.container {
  display: flex;
  background-color: #ccc;
}

.icon {
  background-color: #ccc;
}

.input-field {
  flex-grow: 1;
  background-color: #ccc;
  border: none;
  padding: 5px;
}

在这个例子中，我们使用了一个包含图标和输入框的容器div，将其设置为Flex布局。容器的背景色设置为相同的颜色（#ccc）。

图标的容器div（.icon）也设置了相同的背景色，使其与容器的背景色相同。

输入框（.input-field）使用了flex-grow: 1来占据剩余的空间，并且设置了相同的背景色，并去除了边框和内边距。

这样就能实现图标和输入框并列在同一行，并且覆盖相同的背景色。