这个搜索框怎么写啊！

用html和css 分享出来的时候html的代码能不能帮忙给简单表述一些注释啊！谢谢了 麻烦了 打扰了

img

f12 查看一下，这种写 input + button 就可以实现，css自己调试就可以了

input输入框，加了一些样式。建议引入前端框架来实现

直接F12，看这个搜索框的DOM结构和CSS，自己模仿着写。

input 加圆角 。button 加定位 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:10px;
        padding: 0;
    }
    .naps{
        display: flex;
    align-items: center;
    height: 35px;
    width: 500px;
    border: 1px solid black;
    border-radius: 20px;
    justify-content: space-between;
    padding: 0;
    }
    .naps input{
        border:none;
        height: 100%;
        width: 100%;
        line-height: 30px;
        outline:none
    }
    .shouIcon{
        width: 83px;
    height: 35px;
    border-radius: 20px;
    background: blue;
    color: white;
    text-align: center;
    line-height: 35px;
    margin-right: -1px;
    }
</style>
<body>
    <div class="naps">
        <input type=""/>
        <!-- //这里改成图标就可以了 -->
        <div class="shouIcon">搜索</div>
    </div>
</body>
</html>