怎样用css制作搜索框

搜索框是网站中非常重要的组件，一般都会放置在页面头部或导航栏中，方便用户快速输入关键词进行搜索。下面介绍如何使用CSS制作一个简单的搜索框。

首先，我们需要一个基本的HTML结构。

div class="search-box">
    input type="text" placeholder="Search">
    button>
    Go/button>
    /div>

以上代码中，我们使用了一个标签来包裹整个搜索框组件。在标签中，我们使用了标签来创建一个文本输入框和标签来创建一个搜索按钮。

接下来，让我们使用CSS样式来美化这个搜索框。

.search-box {
    display: flex;
    align-items: center;
}
input[type="text"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
}
button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #0072C6;
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
}
    

以上代码中，我们使用了一些常见的CSS属性来设置搜索框样式。例如，使用display: flex; 来指定搜索框为弹性布局，使用align-items: center; 来垂直居中搜索框内的元素。

同时，我们使用了border、border-radius、padding等属性来设置搜索框和按钮的边框样式和内边距大小。使用margin-left属性来设置按钮和输入框之间的间距。

最后，我们使用background-color和color属性来设置按钮的背景色和字体颜色。

经过以上的设置，一个简单的搜索框就制作完成了。当然，这只是一个最基本的搜索框，根据需求，我们还可以添加其他样式属性，如阴影效果、动画效果等，来提高搜索框的美观度。

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