Elementor 搜索表单的深度定制与定位指南

/* 1. 移除搜索表单容器的默认背景 */
/* 
   Elementor 搜索表单通常有一个容器元素，可能带有背景色。
   此规则将其背景设为透明，以融入父容器的背景。
*/
selector .elementor-search-form__container {
    background-color: transparent !important;
}

/* 2. 定制搜索输入框的样式 */
/* 
   此规则针对搜索输入框（input[type="search"]）进行样式重置和美化。
   - background-color: 设置输入框的背景色。
   - border: none; 移除默认的边框。
   - outline: none; 移除浏览器在元素获得焦点时显示的默认轮廓。
   - border-radius: 0px; 移除圆角，使输入框呈现直角。
   - padding: 增加输入框内部的文字与边框之间的距离。
   - width: 100%; 使输入框填充其父容器的可用宽度。
   - box-sizing: border-box; 确保 padding 和 border 不会增加元素的总宽度。
*/
selector input[type="search"] {
    background-color: #fff; /* 输入框背景色 */
    border: none; /* 移除默认边框 */
    outline: none; /* 移除默认焦点轮廓 */
    border-radius: 0px; /* 移除圆角 */
    padding: 10px 15px; /* 增加内边距 */
    width: 100%; /* 填充可用宽度 */
    box-sizing: border-box; /* 盒模型调整 */
    /* margin-right: 20px; */ /* 如果需要输入框与按钮之间有间距，可取消注释 */
}

/* 3. 移除输入框在焦点（点击）时的样式 */
/* 
   此规则专门处理输入框在被点击或获得焦点时的样式，
   确保移除任何默认的边框、轮廓或阴影效果，以保持样式一致性。
*/
selector input[type="search"]:focus {
    border: none; /* 再次确保焦点时没有边框 */
    outline: none; /* 再次确保焦点时没有轮廓 */
    box-shadow: none; /* 移除可能的阴影效果 */
}

/* 4. （可选）定制搜索按钮样式 */
/* 
   如果您的搜索表单包含提交按钮，此规则可以对其进行样式定制。
   您可以根据需要调整背景色、文字颜色、边框等。
*/
selector .elementor-search-form__submit {
    background-color: #4CAF50; /* 按钮背景色 */
    color: white; /* 按钮文字颜色 */
    border: none;
    border-radius: 0px;
    padding: 10px 15px;
    cursor: pointer;
    /* 其他样式如字体大小、悬停效果等 */
}

/* 5. （高级）将整个搜索表单小部件水平居中 */
/* 
   将小部件本身居中通常有两种方法：
   a) 如果小部件是块级元素且有固定宽度，可以使用 margin: 0 auto;
   b) 更灵活的方法是将其设为 Flex 容器，并使用 justify-content 属性。

   请注意：此方法的效果取决于小部件的默认行为及其父容器（Elementor 列）的布局。
   在某些情况下，您可能需要在列设置中调整对齐方式。
*/
selector {
    /* 方法一：如果小部件有固定宽度，且是块级元素 */
    /* max-width: 400px; */ /* 设置一个最大宽度 */
    /* margin: 0 auto; */ /* 水平居中 */

    /* 方法二：将小部件容器设为 Flex 容器，以居中其内部内容（输入框和按钮） */
    display: flex; /* 将小部件容器设为 Flex 容器 */
    justify-content: center; /* 水平居中其内部内容 */
    align-items: center; /* 垂直居中（如果需要，例如当输入框和按钮高度不同时） */
    width: 100%; /* 确保 Flex 容器占据足够宽度 */
}