[分享]css中怎么制作搜索框

在进行网页设计时，一个常见的需求就是在页面上添加一个搜索框，方便用户进行搜索。在此我们将介绍如何使用 CSS 制作一个简单的搜索框。首先，我们需要在 HTML 中添加一个 text input 元素，...

在进行网页设计时，一个常见的需求就是在页面上添加一个搜索框，方便用户进行搜索。在此我们将介绍如何使用 CSS 制作一个简单的搜索框。

首先，我们需要在 HTML 中添加一个 text input 元素，这个元素用于用户输入搜索关键字。这个元素的代码如下：

<input type="text" name="search" id="search" placeholder="请输入搜索关键字"> 

接下来，在 CSS 中我们可以为这个元素添加样式，制作出一个简单的搜索框。我们可以为这个元素设置宽度、高度、边框和圆角等样式。具体的代码如下：

#search {
  width: 300px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  font-size: 16px;
  outline: none; /* 去掉默认的外边框 */
} 

代码中，我们设置了搜索框的宽度为 300px，高度为 30px。为了让搜索框的样式更加美观，我们将其边框设置为 1px 实线的 #ccc 颜色，同时给它添加了 5px 的圆角。我们还通过设置 padding 属性来为搜索框添加内边距，让输入的内容不会太靠近边框。最后我们还设置了搜索框的字体大小为 16px，并且去掉了它的默认外边框。

以上就是使用 CSS 制作一个简单搜索框的方法，它可以帮助我们快速地实现搜索功能，为用户提供便利。