[分享]css中怎么做出搜索

在网页设计中，搜索框是一个非常重要且常见的组件。本文将介绍如何利用CSS制作一个简单的搜索框。首先，我们需要定义一个HTML元素，通常是一个标签。下面是一个基本的HTML模板： 接下来，我们可以使...

在网页设计中，搜索框是一个非常重要且常见的组件。本文将介绍如何利用CSS制作一个简单的搜索框。

首先，我们需要定义一个HTML元素，通常是一个标签。下面是一个基本的HTML模板：

<div class="search">
  <input type="text" placeholder="Search">
</div> 

接下来，我们可以使用CSS样式来美化它。首先，我们可以设置搜索框的宽度和高度，并且设置它的边框和边框半径：

.search input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
} 

我们也可以添加一些内边距(padding)来使其更加美观：

.search input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 10px;
} 

现在，我们可以通过使用CSS伪类来设置搜索框的焦点状态：

.search input:focus {
  outline: none;
  border-color: #1E90FF;
  box-shadow: 0 0 5px #1E90FF;
} 

我们还可以添加一个搜索按钮，为搜索框增加交互功能。我们同样可以使用CSS样式来美化它：

.search button {
  width: 60px;
  height: 30px;
  background-color: #1E90FF;
  border: none;
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
} 

最后，我们把上面的代码结合起来，就可以得到一个完整的搜索框了：

<div class="search">
  <input type="text" placeholder="Search">
  <button>Search</button>
</div>

.search input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 10px;
}

.search input:focus {
  outline: none;
  border-color: #1E90FF;
  box-shadow: 0 0 5px #1E90FF;
}

.search button {
  width: 60px;
  height: 30px;
  background-color: #1E90FF;
  border: none;
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
} 

这是一个非常简单的搜索框示例。当然，我们还可以对搜索框进行更加复杂的设计和交互，例如添加搜索建议、实现异步搜索等等。请根据实际需求进行设计。