css 好看的搜索框样式

在网站设计中，搜索框常常作为导航和查询的利器。为了让网站更具有美感和用户友好性，CSS提供了一些好看的搜索框样式。

CSS样式可以塑造搜索框的各个方面，包括边框大小和颜色、背景颜色以及输入文字的字体。下面是一个漂亮的搜索框样例：

.searchbox {
      position: relative;
      width: 350px;
      height: 40px;
      margin: 0 auto 30px;
      display: flex;
      justify-content: center;
      align-items: center;
}
.searchbox input[type="text"] {
      width: 100%;
      height: 100%;
      border: none;
      padding: 0 20px;
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 1px;
      color: #333;
      background: #f6f6f6;
      border-radius: 4px;
}
.searchbox input[type="submit"] {
      position: absolute;
      right: 0px;
      height: 100%;
      border: none;
      padding: 0 20px;
      background: #fe8c00;
      color: #fff;
      font-weight: 500;
      border-radius: 4px;
      cursor: pointer;
}
    

上面的代码由两部分组成。第一部分创建搜索框容器，它被指定为相对定位且具有居中对齐功能。第二部分对输入区域和提交按钮进行样式设置，例如设置输入区域的宽度为100%，并为按钮设置背景颜色和光标样式。

这仅仅是一个例子，使用CSS可以创建无数种好看的搜索框，用于美化您的网站。尝试一些不同的外观和风格，以确定哪种最适合您的网站。

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