用CSS+HTML实现的搜索图标搜索框代码

发布时间：2023-10-23 14:46:35 所属栏目：语言来源：

导读：给大家分享一下前端用处很多的带小图标的搜索框的制作方法。

基本思路

1、搜索图像用绝对定位放到搜索框的上方

2、input框设置文本缩进，大小为搜索图像大小加上图像左右两边的外边距

准备

只需

给大家分享一下前端用处很多的带小图标的搜索框的制作方法。

基本思路

1、搜索图像用绝对定位放到搜索框的上方

2、input框设置文本缩进，大小为搜索图像大小加上图像左右两边的外边距

准备

只需一个搜索图标图片，类似于下图

代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>搜索框demo</title>

<style type="text/css">

  *{

   margin: 0;

   padding: 0;

  }

  body{

   width: 100vw;

   height: 100vh;

   background: radial-gradient(at center,

    #3498db,#2980b9);

   display: flex;

   justify-content: center;

   align-items: center;

  }

  div.search{

   height: 40px;

   width: 500px;

  }

  div.search form{

   width: 100%;

   height: 100%;

  }

  div.search form input:nth-child(2){

   width: 400px;

   height: 100%;

   font-size: 16px;

   text-indent: 40px;

   border: none;

   float: left;

  }

  div.search form input:nth-child(3){

   width: 100px;

   height: 100%;

   font-size: 16px;

   letter-spacing: 5px;

   border: none;

  }

  div.search form img{

   position: absolute;

   left: 50vw;

   transform: translateX(-250px);

   margin-top: 10px;

   margin-left: 10px;

   height: 20px;

  }

</style>

</head>

<body>

<div class="search">

  <form action="#" method="post">

   <img src="./search_ico.png" alt="">

   <input type="text" name="condition" placeholder="请输入搜索条件">

   <input type="submit" value="搜索">

  </form>

</div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!