css 如何建立一个搜索框

在编写网站时，搜索框是一个非常重要的元素。通过添加一些CSS代码，你可以将搜索框的外观设计变得非常吸引人和功能性强大。以下是如何通过CSS建立一个搜索框的方法。

.search-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 300px;
      height: 40px;
      background-color: #F8F8F8;
      border-radius: 20px;
}
.search-box input {
      border: none;
      width: 250px;
      height: 30px;
      background: none;
      font-size: 16px;
      outline: none;
      margin-left: 10px;
}
.search-box button {
      border: none;
      background: none;
      outline: none;
      cursor: pointer;
}
.search-box button img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
}
    

首先，我们需要创造一个容器来包含搜索框。这里我们使用的是类选择器".search-box"。

我们采用了 flexbox 布局来让盒子和里面的元素相对居中。这样做是为了在不同的设备上保证搜索框能够自动调整大小。

为了使搜索框看起来更加美观，我们添加了灰色的背景颜色和圆角。接下来，在搜索框容器里面创建一个文本输入框和一个搜索按钮

文本输入框规则如下：

• 将边框设置为无
• 将文本框背景设置为透明
• 调整宽度和高度
• 将默认字体设置为16像素
• 去掉焦点样式

搜索按钮规则如下：

• 将边框设置为无
• 将背景设置为透明
• 去掉焦点样式
• 在按钮里面插入一个图片搜索符号

通过这些CSS规则，你可以轻松地建立一个功能强大而美观的搜索框。记得在你的网站搜索框中添加相应的HTML代码，以显示此搜索框。

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