CSS 在文本框中带有按钮的搜索框

在本文中，我们将介绍如何使用CSS创建一个带有按钮的搜索框。搜索框常常在网站和应用程序中使用，使用户能够方便地输入搜索关键字并执行搜索操作。

阅读更多：CSS 教程

使用基本CSS样式创建搜索框

首先，我们可以使用基本的CSS样式创建一个简单的搜索框。下面是一个示例代码：

<div class="search-box">
  <input type="text" placeholder="请输入搜索关键字">
  <button type="submit">搜索</button>
</div>

.search-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-box input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

.search-box button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
}

在上面的示例中，我们使用了一个包含文本框和按钮的<div>元素。为了让文本框和按钮在一行中居中显示，我们给父元素设置了display: flex;属性，并使用align-items: center;和justify-content: center;属性来水平和垂直居中。

文本框的样式通过.search-box input选择器进行定义，我们设置了一些常见的样式，如内边距、边框和圆角。

按钮的样式通过.search-box button选择器进行定义，我们设置了背景颜色、文字颜色、边框等属性。

添加特效和状态

为了使搜索框更加交互和美观，我们可以为其添加一些特效和状态。下面是一些示例代码：

.search-box input:focus {
  border-color: #007bff;
  box-shadow: 0 0 3px #007bff;
}

.search-box button:hover {
  background-color: #0056b3;
}

在上面的示例中，我们使用了:focus伪类选择器来定义当文本框获得焦点时的样式。我们将边框颜色更改为蓝色，并添加了一个浅蓝色的阴影效果。

同时，我们使用了:hover伪类选择器来定义当鼠标悬停在按钮上时的样式。我们将背景颜色更改为深蓝色，以提供视觉反馈。

自定义图标和样式

如果我们希望为搜索框的按钮添加一个自定义图标，我们可以使用字体图标或者背景图片的方式。下面是一些示例代码：

.search-box button {
  background-image: url('search-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  padding-left: 20px;
}

在上面的示例中，我们为按钮设置了一个背景图片，并使用了background-position属性将图标居中。我们还通过background-size属性设置了图标的尺寸，并通过padding-left属性为图标留出一些空间。

如果我们使用字体图标，可以使用@font-face将自定义字体文件引入，并使用普通的文本内容来显示图标。

@font-face {
  font-family: 'CustomIcon';
  src: url('custom-icon.woff2') format('woff2'),
       url('custom-icon.woff') format('woff');
}

.search-box button {
  font-family: 'CustomIcon';
  content: '\e001'; /* Unicode字符编码 */
}

在上面的示例中，我们通过@font-face引入了一个自定义字体文件，并使用font-family属性进行命名。然后我们通过content属性设置按钮的文本内容为特定的Unicode字符编码，这个编码对应于字体图标集合中的一个图标。

响应式设计

在现代移动设备普及的情况下，我们需要确保搜索框在不同屏幕尺寸下能够良好地显示。我们可以使用媒体查询和一些CSS技术来实现响应式设计。

@media (max-width: 768px) {
  .search-box {
    flex-direction: column;
  }

  .search-box input {
    margin-bottom: 10px;
    border-radius: 5px;
  }

  .search-box button {
    border-radius: 5px;
  }
}

在上面的示例中，我们使用了@media规则来针对最大宽度为768像素的设备应用样式。我们通过flex-direction: column;将搜索框的子元素垂直排列，并添加了一些间距和圆角。