css中搜索框中的

在网页设计中，搜索框是一个非常常用的元素之一。而如何使用 CSS 实现一款漂亮美观的搜索框，也是我们需要掌握的技能之一。

/* 搜索框基础样式 */
.search-box{
   position: relative;
   display: inline-block;
}
.search-box input[type="text"]{
   width: 200px;
   height: 30px;
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 20px;
   outline: none;
}
.search-box button{
   position: absolute;
   right: 0;
   top: 0;
   width: 50px;
   height: 40px;
   background-color: #333;
   color: #fff;
   border-radius: 20px;
   border: none;
   outline: none;
   cursor: pointer;
}

/* 搜索框动态效果 */
.search-box input[type="text"]:focus{
   width: 300px;
   transition: width 0.5s ease-in-out;
}
.search-box button:hover{
   background-color: #666;
   transition: background-color 0.5s ease-in-out;
} 

以上代码实现了一个基本的搜索框基础样式，并在其基础上加入了搜索框的动态效果，使得搜索框更加美观和实用。要实现不同的搜索框样式，我们可以改变其背景、字体和动态效果等方面，使得搜索框与整个网页风格和体验相协调。