/* 主容器 */
.search-container {
position: relative;
margin: 20px auto;
width: 300px;
}
/* 输入框样式 */
.search-container input[type="text"] {
width: 100%;
height: 40px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
box-shadow: none;
}
/* 搜索按钮样式 */
.search-container button[type="submit"] {
position: absolute;
top: 0;
right: 0;
width: 90px;
height: 40px;
padding: 0;
background-color: #f44336;
color: #fff;
font-size: 16px;
border: none;
border-radius: 0 5px 5px 0;
outline: none;
cursor: pointer;
transition: background-color .3s;
}
/* 搜索按钮悬浮效果 */
.search-container button[type="submit"]:hover {
background-color: #f55d4e;
}以上代码定义了一个名为search-container的容器，其中包含一个文本输入框和一个按钮。容器设置了相对定位，输入框设置了边框、圆角和阴影，按钮设置了绝对定位、背景色、圆角和鼠标悬浮效果。
这些代码并不复杂，但却可以创造出一个漂亮实用的搜索框效果。