基于html css实现带搜索图标的搜索框功能

沃梦达教程前端开发

2023-12-13 9

下面是基于html css实现带搜索图标的搜索框的完整攻略。

下面是基于html css实现带搜索图标的搜索框的完整攻略。

步骤1：html代码部分

首先我们需要使用html创建搜索框的代码，代码如下：

<div class="search-box">
   <input type="text" placeholder="Search">
   <a href="#"><i class="fa fa-search"></i></a>
</div>

在上述代码中，我们创建了一个class名为"search-box"的div盒子作为搜索框的容器，里面包含一个type为text的input标签，用于输入搜索内容。input标签里的placeholder属性用于设置输入框的提示文本。还有一个class名为"fa fa-search"的图标样式，用于创建搜索图标。

步骤2：css代码部分

接下来，我们需要使用css来美化搜索框的样式。代码如下：

.search-box {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  color: #828282;
}

input[type="text"] {
   width: 250px;
   height: 40px;
   padding-left: 10px;
   font-size: 14px;
   color: #828282;
   border: 1px solid #D3D3D3;
   border-radius: 30px;
}

.fa-search {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 18px;
   color: #828282;
}

在上述代码中，我们对搜索框和图标进行了样式设置。在搜索框的样式设置中，我们设置了它的position属性为relative，表示相对定位，用于后续绝对定位的图标布局。还设置了input标签的样式，包括宽度、高度、字体大小、文字颜色、边框、圆角等属性。在图标的样式设置中，我们使用了font-awesome字体库中的"fa fa-search"图标样式，并设置其position属性为absolute，用于绝对定位。

示例1

下面是一个使用示例1，可以将搜索框放在一个Navbar中。代码如下：

<nav class="navbar">
   <div class="search-box">
      <input type="text" placeholder="Search">
      <a href="#"><i class="fa fa-search"></i></a>
   </div>
</nav>

在上述代码中，我们将搜索框放在了一个Navbar中。

示例2

下面是一个使用示例2，可以在页面中居中显示搜索框。代码如下：

<div class="centered-search">
   <div class="search-box">
      <input type="text" placeholder="Search">
      <a href="#"><i class="fa fa-search"></i></a>
   </div>
</div>