[分享]css中怎样写搜索框

CSS 中写搜索框是开发网页的重要部分。下面是一些让您快速入门的 CSS 搜索框代码。

 /* 搜索框的外边框 */
  .search-box {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
  }

  /* 输入框的样式 */
  .search-box input[type="text"] {
    width: 50%;
    padding: 5px;
    font-size: 16px;
    border: none;
    outline: none;
  }

  /* 搜索按钮的样式 */
  .search-box button[type="submit"] {
    background-color: #4CAF50;
    color: #fff;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  } 

以上 CSS 代码可以创建一个带有搜索输入框和按钮的搜索框。以 .search-box 选择器为例，其他选择器的解释如下：

 .search-box 确定外边框的样式。
  .search-box input[type="text"] 确定输入框的样式。
  .search-box button[type="submit"] 确定搜索按钮的样式。 

在创建搜索框时，应确保搜索框的尺寸、颜色和字体选择与页面的整体风格相匹配。

此外，可以添加更多 CSS 样式来增强搜索框的功能，例如添加下拉选项、搜索历史记录和热门搜索等。

希望这篇文章可以帮助您开发符合标准的搜索框，并为网站带来更好的用户体验。