/* 搜索表单 */
.search-form {
    display: flex; /* 使用flexbox布局 */
    align-items: left; /* 垂直居中对齐 */
    margin: 0px;}
 
/* 搜索输入框 */
.search-input {
    padding: 2px; /* 内边距 */
    font-size: 12px; /* 字体大小 */
    border: 2px solid #ccc; /* 边框 */
    border-radius: 5px 0 0 5px; /* 边框圆角，仅左侧 */
    outline: none; /* 去除点击时的轮廓 */
    background-color: lightblue;
    flex-grow: 1;}
 
/* 搜索按钮 */
.search-button {
    padding: 2px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    background-color: #4CAF50; /* 背景颜色 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标悬停时显示手指图标 */
    border-radius: 0 5px 5px 0;}
 
/* 当按钮被点击或处于激活状态时 */
.search-button:active {
    background-color: #45a049;}

.search-form {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

@media (max-width: 600px) {
    .search-form {
        flex-direction: column;}
    .search-input, .search-button {
        border-radius: 5px; /* 在小屏幕上使所有圆角都存在 */
        border-right: 2px solid #ccc; /* 在小屏幕上恢复右侧边框 */
        width: 100%; /* 使输入框和按钮全宽显示 */
        margin-bottom: 5px;}
}
