Elementor 搜索表单的样式定制与居中定位教程-html教程-PHP中文网

Elementor 搜索表单的样式定制与居中定位教程

霞舞

发布： 2025-10-17 10:55:01

原创

556人浏览过

Elementor 搜索表单的样式定制与居中定位教程

本教程将指导您如何通过自定义 css 精准控制 elementor 搜索表单的样式和位置。您将学习如何移除默认边框、轮廓及点击效果，并实现表单的水平居中，从而打造出符合设计要求且视觉清爽的搜索组件。

在使用 Elementor 构建页面时，我们常常需要对内置的小部件进行更深层次的样式定制，以满足特定的设计需求。Elementor 搜索表单小部件默认带有边框、点击时的轮廓以及特定的背景样式，有时这与整体网站风格不符。本教程将详细介绍如何通过自定义 CSS 移除这些默认样式，并实现搜索表单的居中定位。

1. 理解 Elementor 小部件的自定义 CSS

Elementor 允许用户在每个小部件的“高级”选项卡中添加“自定义 CSS”。在这里，selector 关键词代表了当前小部件的根 HTML 元素。这意味着您可以直接通过 selector 来定位和修改该小部件及其内部元素的样式，而无需编写复杂的全局 CSS 选择器。

当默认的 Elementor 样式或主题样式覆盖了您的预期效果时，自定义 CSS 结合 !important 规则是解决冲突的有效方法。

2. 移除默认样式与定制外观

Elementor 搜索表单通常包含一个容器、一个输入框和一个提交按钮。我们将分别针对这些元素进行样式调整。

2.1 清除表单容器背景

搜索表单可能有一个默认的背景色。为了使其透明或设置为指定颜色，我们需要定位其容器。

selector .elementor-search-form__container {
    background-color: transparent !important; /* 设置背景为透明 */
    /* 如果需要其他颜色，例如白色：background-color: #fff !important; */
}

登录后复制

!important 确保此规则优先于任何其他背景颜色设置。

2.2 定制输入框样式

输入框是用户输入搜索关键词的地方，其默认的边框、轮廓和点击效果往往需要被移除或修改。

selector input.elementor-search-form__input {
    background-color: #fff; /* 设置输入框背景为白色 */
    border: none !important; /* 移除所有边框 */
    border-radius: 0px !important; /* 移除圆角，设置为直角 */
    outline: none !important; /* 移除点击（聚焦）时的轮廓 */
    box-shadow: none !important; /* 移除点击（聚焦）时的阴影效果 */
    /* margin-right: 20px; */ /* 如果需要输入框右侧有间距，可自行调整 */
}

登录后复制

这里我们使用了更具体的选择器 input.elementor-search-form__input 来确保只作用于搜索表单的输入框。outline: none 和 box-shadow: none 对于移除点击时的视觉反馈至关重要。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

2.3 调整提交按钮样式（可选）

如果您的搜索表单包含一个提交按钮，并且您也想对其进行样式调整，例如移除边框或改变背景。

selector button.elementor-search-form__submit {
    border: none !important; /* 移除按钮边框 */
    background-color: transparent !important; /* 设置按钮背景为透明 */
    /* color: #000; */ /* 示例：设置按钮文字颜色 */
    /* padding: 10px 15px; */ /* 示例：调整按钮内边距 */
}

登录后复制

请根据您的实际需求调整按钮的样式。

3. 实现搜索表单的居中定位

将搜索表单小部件水平居中是常见的布局需求。我们可以通过 Flexbox 布局来实现这一点。

selector {
    display: flex; /* 将小部件根元素设置为 Flex 容器 */
    justify-content: center; /* 使其内部内容（即搜索表单）水平居中 */
    width: 100%; /* 确保小部件占据其父容器的全部宽度，以便居中有效 */
}

登录后复制

通过将小部件的根元素设置为 Flex 容器并应用 justify-content: center，我们能够轻松地将其内容水平居中。width: 100% 是关键，它确保了 Flex 容器有足够的空间来执行居中操作。

4. 完整 CSS 代码示例与应用

将以上所有 CSS 代码整合，并粘贴到 Elementor 搜索表单小部件的“高级”->“自定义 CSS”区域。

/* 1. 清除表单容器背景 */
selector .elementor-search-form__container {
    background-color: transparent !important;
}

/* 2. 定制输入框样式：移除边框、轮廓和点击效果 */
selector input.elementor-search-form__input {
    background-color: #fff;
    border: none !important;
    border-radius: 0px !important;
    outline: none !important;
    box-shadow: none !important;
    /* margin-right: 20px; */ /* 根据需要调整输入框间距 */
}

/* 3. 调整提交按钮样式（可选） */
selector button.elementor-search-form__submit {
    border: none !important;
    background-color: transparent !important;
    /* color: #000; */
}

/* 4. 实现搜索表单的水平居中 */
selector {
    display: flex;
    justify-content: center;
    width: 100%;
}

登录后复制

注意事项与总结

!important 的使用: !important 规则可以强制应用样式，但过度使用可能导致 CSS 代码难以维护和调试。建议仅在确实需要覆盖 Elementor 或主题的默认样式时使用。
浏览器开发者工具: 学习使用浏览器开发者工具（按 F12）来检查 Elementor 元素的 CSS 类和结构，这将极大帮助您编写更精确的自定义 CSS。
响应式设计: 在桌面端调整好样式后，请务必检查在平板和手机等不同设备上的显示效果，并根据需要添加媒体查询来优化响应式布局。
选择器精度: 尽量使用更具体的选择器来避免意外地影响到页面上的其他元素。例如，selector input.elementor-search-form__input 比 selector input 更安全。