[分享]css3搜索框怎么做

CSS3搜索框是一种非常流行的搜索框样式，在网页设计中经常使用，它通过CSS3的新特性，可以实现更加美观、响应式和动态的搜索框样式。/ CSS3搜索框基本样式 / .searchbox { width...

CSS3搜索框是一种非常流行的搜索框样式，在网页设计中经常使用，它通过CSS3的新特性，可以实现更加美观、响应式和动态的搜索框样式。

/* CSS3搜索框基本样式 */
.search-box {
  width: 300px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #f5f5f5;
  padding-left: 20px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s;
}

/* 鼠标移入搜索框时的样式 */
.search-box:hover {
  background-color: #e0e0e0;
}

/* 输入框里的文字样式 */
.search-box::-webkit-input-placeholder {
  color: #999;
}
.search-box::-moz-placeholder {
  color: #999;
}
.search-box:-ms-input-placeholder {
  color: #999;
}

/* 搜索按钮样式 */
.search-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #999;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s;
}

/* 鼠标移入搜索按钮时的样式 */
.search-btn:hover {
  background-color: #666;
} 

以上是CSS3搜索框的基本样式代码，我们可以将这些样式应用到一个搜索框组件中，然后在HTML中使用该组件即可。

<!-- 搜索框组件代码 -->
<div class="search-container">
  <input type="text" class="search-box" placeholder="请输入关键词">
  <button class="search-btn">搜</button>
</div> 

这里我们使用了一个div包裹输入框和搜索按钮，然后通过CSS设置该div的样式。

至此，我们就完成了一个简单的CSS3搜索框组件，你可以修改CSS代码和HTML代码中的属性，来实现更加个性化和高级的搜索框样式。