css中搜索框样式怎么做

众所周知，搜索框是网页中非常重要的一个元素，在Web开发中，如何美化搜索框样式是大家非常关注的一个话题。下面介绍如何使用CSS实现一个简单的搜索框样式。

/* 基础样式 */
.search-box {
  display: inline-block;
}

.search-input {
  border: 1px solid #cccccc;
  border-radius: 4px;
  height: 30px;
  padding: 4px 10px;
}

.search-button {
  border: none;
  border-radius: 4px;
  background-color: #5d9cec;
  color: white;
  font-size: 14px;
  height: 38px;
  padding: 0 18px;
  cursor: pointer;
}

/* 悬浮提示样式 */
.search-input:focus + .search-tips {
  display: block;
}

.search-tips {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 240px;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  z-index: 999;
}

.search-tips ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.search-tips li {
  margin: 6px 0;
  padding: 6px 10px;
  cursor: pointer;
}

.search-tips li:hover {
  background-color: #f7f7f7;
} 

首先，我们定义了一个.search-box容器，其内部包含搜索输入框和搜索按钮两个元素。在样式中，我们对这两个元素做了以下基础样式设置：

• search-input：设置边框、圆角、高度、内边距等样式；
• search-button：设置背景颜色、字体颜色、字体大小、高度、内边距、鼠标指针等样式。

接着，我们添加了悬浮提示的样式效果。当搜索输入框获得焦点时，我们显示.search-tips元素，即悬浮提示框。我们设置了.search-tips的基本样式，并在其中添加了一个ul元素和若干个li元素，分别显示搜索提示信息。这里我们只设置了基本样式，希望开发者可以根据自己需要进行样式调整。

以上就是搜索框样式的实现方法，希望对大家指导有所帮助。