两种方法——在input输入框里放一个搜索小图标

技术频道 - html技术

两种方法——在input输入框里放一个搜索小图标

作者:admin 时间:2022-3-29 20:1:14 浏览:

假如只有一个输入的搜索条件，你还在用一个单独的“搜索”按钮(button)标签吗？那种设计现在使用的不多了，现在更多的是把搜索图标放在输入框内，这是一个时尚的UI设计方式。本文将通过3个实例，介绍如何在input输入框里放一个搜索小图标。

如何在input输入框里放一个搜索小图标

完整HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>输入框小图标</title>
    <style type="text/css">
     .box01{
        color: #434343;
        position: relative;
        margin: 20px 20px;
     }
     .box01 input{
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance:none ;
         outline: 0;
         width: 270px;
         height: 30px;
         border:0px solid #fff;
         border-radius: 20px;
         box-shadow:0 0 5px 2px rgba(0,0,0,0.1);
         padding: 0 30px 0 15px;
     }
     .box01 label{
         font-size: 16px;
         z-index: 2;
         position: absolute;
         left: 109px;
         top:15%;
         color: #b2b2b2;
     }

     .icon{
         display: inline-block;
         height: 16px;
         width: 16px;
         background-image: url(search.png);
         background-repeat: no-repeat;
         position: absolute;
         top: 24%;
         left: 290px;
         z-index: 2;
     }

     #tip02{
         padding: 0 10px 0 35px;
         background-image: url(search.png);
         background-repeat: no-repeat;
         background-position: 10px 7px;
     }
     #tip03{
         width: 290px;
         padding: 0 10px 0 15px;
         background-image: url(search.png);
         background-repeat: no-repeat;
         background-position: 290px 7px;
     }


    </style>
</head>
<body>
    <div class="box01">
        <input type="text" id="tip" placeholder="代码改变世界">
        <i class="icon"></i>
    </div>

    <div class="box01"><input type="text" id="tip02" placeholder="代码改变世界"></div>
    <div class="box01"><input type="text" id="tip03" placeholder="代码改变世界"></div>

</body>
</html>