亚马逊类型搜索框HTML CSS - Introduction

搜索框是许多网站和应用程序的必要元素之一，因此设计一个漂亮和易于使用的搜索框可以为您的网站或应用程序提供更好的用户体验。亚马逊搜索框是一种流行的类型，具有简洁的外观和使用方便的功能。

在这篇文章中，我们将使用HTML和CSS创建一个类似于亚马逊搜索框的搜索框。我们将从头开始编写代码，并提供完整的代码解释和演示。我们鼓励您跟随本文，并将代码用于您自己的项目中。

HTML

我们将从编写HTML代码开始。搜索框本质上是一个表单，其中包含一个文本输入字段和一个提交按钮。以下是我们要使用的HTML标记：

<form action="#" method="get">
  <input type="text" placeholder="搜索您想要的商品">
  <button type="submit">搜索</button>
</form>

此代码包括一个包装在<form>标记内的文本输入字段和提交按钮。我们还将placeholder属性用于文本字段，以提供有关用户应输入什么的提示。注意，我们将action属性设置为#，以使表单提交到当前页面。

CSS

现在，我们将使用CSS为我们的搜索框添加样式。我们将使用flex布局来定位搜索框和按钮。以下是我们的CSS样式：

form {
  display: flex;
}

input[type="text"] {
  flex: 1;
  padding: 12px;
  border: none;
  outline: none;
  font-size: 16px;
  background-color: #f1f1f1;
}

button[type="submit"] {
  padding: 12px 30px;
  border: none;
  outline: none;
  font-size: 16px;
  background-color: #ddd;
  cursor: pointer;
}

我们将<form>元素设置为display: flex;，以使其成为flex容器。我们使用flex: 1;将输入文本字段和提交按钮自动调整大小，以充分填充父容器。我们还为文本字段添加了一些样式，如填充、边框、背景色和字体大小。提交按钮也有类似的样式，但使用不同的背景颜色和指针样式。

Demo

现在，我们已经成功创建了一个类似于亚马逊搜索框的搜索框。在下面的演示中，您可以查看此搜索框的实时演示。

Conclusion

通过HTML和CSS，我们已经成功创建了一个可自定义的搜索框。此搜索框是一种常见的类型，可供许多网站和应用程序使用。您可以使用此模板并将其用于您自己的项目中。请随意将代码调整为符合您自己的需求。