Elementor搜索表单高级定制：样式优化与精准定位

/* 针对整个搜索表单容器的样式调整 */
selector .elementor-search-form__container {
    /* 将容器背景设置为透明，确保不会有默认背景干扰 */
    background-color: transparent !important;
    /* 可以根据需要调整其他容器样式，例如内边距 */
    /* padding: 0; */
}

/* 针对搜索输入框的样式调整 */
selector .elementor-search-form__input {
    /* 设置输入框背景色，例如白色 */
    background-color: #fff;
    /* 移除默认边框 */
    border: none !important;
    /* 移除默认圆角 */
    border-radius: 0px !important;
    /* 移除聚焦时的默认轮廓 */
    outline: none !important;
    /* 移除聚焦时可能出现的阴影 */
    box-shadow: none !important;
    /* 根据需要调整内边距，使文本与边框保持适当距离 */
    padding: 10px 15px;
    /* 可以设置宽度，例如占据父容器的80% */
    /* width: 80%; */
}

/* 针对搜索输入框聚焦时的样式调整（点击或Tab键选中） */
selector .elementor-search-form__input:focus {
    /* 确保聚焦时没有边框 */
    border: none !important;
    /* 确保聚焦时没有轮廓 */
    outline: none !important;
    /* 确保聚焦时没有阴影 */
    box-shadow: none !important;
}

/* 针对搜索按钮的样式调整（如果存在并需要定制） */
selector .elementor-search-form__submit {
    /* 示例：设置按钮背景色 */
    background-color: #007bff;
    /* 示例：设置按钮文字颜色 */
    color: #fff;
    /* 移除按钮边框 */
    border: none !important;
    /* 移除按钮圆角 */
    border-radius: 0px !important;
    /* 调整按钮内边距 */
    padding: 10px 15px;
    /* 鼠标悬停时显示手型光标 */
    cursor: pointer;
}

/* 针对搜索按钮悬停时的样式调整 */
selector .elementor-search-form__submit:hover {
    /* 示例：悬停时改变背景色 */
    background-color: #0056b3;
}

/* 针对整个搜索表单小部件容器进行居中 */
selector {
    /* 设置小部件的宽度。可以是固定像素值，也可以是百分比，
       或者使用 fit-content 让其宽度适应内容。 */
    width: fit-content; /* 让小部件宽度适应其内部内容 */
    /* 或者指定一个固定宽度，例如：width: 300px; */
    /* 或者指定一个百分比宽度，例如：width: 80%; */

    /* 自动设置左右外边距，从而实现水平居中 */
    margin: 0 auto !important;
    /* 确保其行为为块级元素，以使 margin: 0 auto; 生效 */
    display: block;
}

/* 1. 整个搜索表单小部件的居中定位 */
selector {
    width: fit-content; /* 让小部件宽度适应内容，或设定具体宽度 */
    margin: 0 auto !important; /* 水平居中 */
    display: block; /* 确保其为块级元素 */
}

/* 2. 搜索表单容器的背景和内边距调整 */
selector .elementor-search-form__container {
    background-color: transparent !important; /* 移除容器背景 */
    /* 其他容器样式，如 padding */
}

/* 3. 搜索输入框的样式调整：背景、边框、圆角、轮廓和阴影 */
selector .elementor-search-form__input {
    background-color: #fff; /* 设置输入框背景色 */
    border: none !important; /* 移除边框 */
    border-radius: 0px !important; /* 移除圆角 */
    outline: none !important; /* 移除聚焦轮廓 */
    box-shadow: none !important; /* 移除聚焦阴影 */
    padding: 10px 15px; /* 设置内边距 */
    /* 可以添加宽度，例如：width: 200px; */
}

/* 4. 搜索输入框聚焦时的样式调整 */
selector .elementor-search-form__input:focus {
    border: none !important; /* 确保聚焦时无边框 */
    outline: none !important; /* 确保聚焦时无轮廓 */
    box-shadow: none !important; /* 确保聚焦时无阴影 */
}

/* 5. 搜索按钮的样式调整（可选） */
selector .elementor-search-form__submit {
    background-color: #007bff; /* 按钮背景色 */
    color: #fff; /* 按钮文字颜色 */
    border: none !important; /* 移除按钮边框 */
    border-radius: 0px !important; /* 移除按钮圆角 */
    padding: 10px 15px; /* 按钮内边距 */
    cursor: pointer; /* 鼠标悬停手型光标 */
}

/* 6. 搜索按钮悬停时的样式调整（可选） */
selector .elementor-search-form__submit:hover {
    background-color: #0056b3; /* 悬停背景色 */
}