CSS 搜索框和带按钮的文本框

在本文中，我们将介绍如何使用CSS创建一个带有按钮的搜索框和文本框。搜索框和文本框是网站和应用程序中常见的元素，为用户提供了便捷的搜索功能和输入文本的能力。

阅读更多：CSS 教程

创建基本的搜索框和文本框

我们从创建一个基本的搜索框和文本框开始。首先，我们需要一个文本框元素和一个按钮元素。我们可以使用HTML创建这些元素：

<input type="text" placeholder="Search...">
<button>Search</button>

这段HTML代码创建了一个文本框和一个按钮，文本框具有一个占位符（placeholder）用于显示搜索的提示信息。接下来，我们使用CSS样式来美化这些元素。

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: 1px solid gray;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

这些CSS样式将文本框和按钮的外观进行了美化。文本框有一个灰色的边框和圆角，按钮的背景颜色是深蓝色，文字是白色的，没有边框。

在搜索框中添加图标

为了进一步改进搜索框的外观，我们可以在文本框内部添加一个搜索图标。我们可以使用CSS中的伪元素来实现这个效果。

input[type="text"] {
  /* 前面的样式 */

  background-image: url("search-icon.png");
  background-repeat: no-repeat;
  background-position: 8px center;
  padding-left: 40px;
}

上面的CSS代码将搜索图标作为文本框的背景图片，并设置了背景图片的位置。我们还需要通过padding-left来确保输入的文本不会被搜索图标覆盖。

响应式设计

在现代的网站和应用程序中，响应式设计是非常重要的。为了使搜索框和文本框在不同的设备上都能正常显示，我们可以使用CSS的媒体查询来调整它们的样式。

@media screen and (max-width: 600px) {
  input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
  }

  button {
    width: 100%;
  }
}

上面的CSS代码使用媒体查询来检测设备的屏幕宽度，当屏幕宽度小于等于600像素时，将搜索框和按钮元素的宽度调整为100%。这样可以确保它们在小屏幕设备上能够自适应显示，并且在竖直方向上有一定的间距。

完整示例

下面是一个完整的示例代码，展示了如何创建一个带有按钮的搜索框和文本框：

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="text"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid gray;
      border-radius: 5px;

      background-image: url("search-icon.png");
      background-repeat: no-repeat;
      background-position: 8px center;
      padding-left: 40px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
    }

    @media screen and (max-width: 600px) {
      input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
      }

      button {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Search...">
  <button>Search</button>
</body>
</html>