css怎么做搜索框

搜索框一般用于网站的头部或者侧边栏，可以方便用户快速搜索到他们需要的内容。下面介绍一下如何使用CSS制作一个简单的搜索框。

        form class="search-form">
                input type="text" placeholder="请输入关键词" class="search-input">
                button type="submit" class="search-button">
    搜索/button>
            /form>

首先，我们需要用form标签来创建一个表单，class为"search-form"，这个class可以用于后面的样式设置。在表单中，我们需要一个输入框和一个按钮，分别对应input和button标签。输入框的type为text，placeholder可以设置一些默认的提示信息，class为"search-input"；按钮的内容为"搜索"，class为"search-button"。

        .search-form {
                display: flex;
                align-items: center;
        }
        .search-input {
                flex: 1;
                padding: 10px;
                border: none;
                border-radius: 20px 0 0 20px;
                box-shadow: none;
        }
        .search-button {
                padding: 10px;
                border: none;
                border-radius: 0 20px 20px 0;
                background: #007bff;
                color: #fff;
                cursor: pointer;
        }
    

接下来，我们要对搜索框进行样式设置。这里我们使用了flex布局，将输入框和按钮横向排列。输入框的flex属性为1，表示占据了剩余的空间。输入框和按钮的padding属性设置了内边距，border属性设置了边框，border-radius属性设置了圆角，box-shadow属性设置了阴影效果。按钮的background和color属性设置了背景和字体颜色，cursor属性设置了指针形状。

经过以上样式设置，我们已经完成了一个简单的搜索框。可以根据需求自行进行样式调整，让搜索框更符合网站的整体风格。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！