css中制作网页的搜索框

CSS可以轻松地制作出各种样式的搜索框，让网页更加美观、易用。

/* 搜索框基础样式 */
.search-Box{
  background-color: #fff;
  border: 1px solid #ccc;
  height: 30px;
  padding: 5px;
  width: 200px;
}

/* 搜索框悬浮样式 */
.search-Box:hover{
  Box-shadow: 0 0 10px #888;
}

/* 搜索按钮基础样式 */
.search-btn{
  background-color: #ddd;
  border: 1px solid #ccc;
  border-left: none;
  height: 30px;
  padding: 5px 10px;
}
 
/* 搜索按钮悬浮样式 */
.search-btn:hover{
  background-color: #ccc;
  cursor: pointer;
}

以上代码是一个基础的搜索框样式，包括输入框和搜索按钮的基础样式以及鼠标悬浮时的样式。

可以通过更改背景颜色、边框样式和尺寸等属性，来定制符合自己需求的搜索框样式。