Houzez主题搜索表单Type下拉框样式自定义问题求助

DevOps 小满

2026-7-18

Houzez主题搜索下拉框层级缩进实现方案

问题描述

使用Houzez主题搭建房产网站，搜索表单的Type、Location下拉框选项当前为垂直单行排列，需改为层级缩进样式（父项顶格，子项缩进）。已尝试自定义CSS、JavaScript及主题文件编辑，未找到有效修改方式，Type字段HTML结构如下：

<div class="elementor-field-group elementor-column form-group elementor-field-group-95424d9 elementor-col-25">
                <label for="form-field-95424d9" class="elementor-field-label elementor-screen-only">Type</label>        <div class="elementor-field elementor-select-wrapper">
        <div class="dropdown bootstrap-select houzez-field-textual form-control elementor-size-sm"><select data-live-search="true" data-size="5" name="type[]" id="form-field-95424d9" class="selectpicker houzez-field-textual form-control elementor-size-sm" data-none-results-text="No results matched {0}" tabindex="null">
            <option value="">Type</option><option data-ref="commercial" value="commercial">Commercial</option><option data-ref="apartment-commercial" value="apartment-commercial"> - Apartment</option><option data-ref="building" value="building"> - Building</option><option data-ref="duplex" value="duplex"> - Duplex</option><option data-ref="factory" value="factory"> - Factory</option><option data-ref="floor" value="floor"> - Floor</option><option data-ref="office" value="office"> - Office</option><option data-ref="plaza" value="plaza"> - Plaza</option><option data-ref="plot" value="plot"> - Plot</option><option data-ref="shop" value="shop"> - Shop</option><option data-ref="warehouse" value="warehouse"> - Warehouse</option><option data-ref="residential" value="residential">Residential</option><option data-ref="apartment" value="apartment"> - Apartment</option><option data-ref="building-residential" value="building-residential"> - Building</option><option data-ref="duplex-residential" value="duplex-residential"> - Duplex</option><option data-ref="penthouse" value="penthouse"> - Penthouse</option><option data-ref="plaza-residential" value="plaza-residential"> - Plaza</option><option data-ref="plot-residential" value="plot-residential"> - Plot</option><option data-ref="room" value="room"> - Room</option>            </select><button type="button" tabindex="-1" class="btn dropdown-toggle btn-light bs-placeholder" data-toggle="dropdown" role="combobox" aria-owns="bs-select-5" aria-haspopup="listbox" aria-expanded="false" data-id="form-field-95424d9" title="Type"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Type</div></div> </div></button><div class="dropdown-menu" style="max-height: 257px; overflow: hidden;"><div class="bs-searchbox"><input type="search" class="form-control" autocomplete="off" role="combobox" aria-label="Search" aria-controls="bs-select-5" aria-autocomplete="list" aria-activedescendant="bs-select-5-0"></div><div class="inner show" role="listbox" id="bs-select-5" tabindex="-1" style="max-height: 205px; overflow-y: auto;"><ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;"><li class="selected active"><a role="option" class="dropdown-item active selected" id="bs-select-5-0" tabindex="0" aria-setsize="20" aria-posinset="1" aria-selected="true"><span class="text">Type</span></a></li><li class=""><a role="option" class="dropdown-item" id="bs-select-5-1" tabindex="0" aria-setsize="20" aria-posinset="2"><span class="text">Commercial</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-2" tabindex="0" aria-setsize="20" aria-posinset="3"><span class="text"> - Apartment</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-3" tabindex="0" aria-setsize="20" aria-posinset="4"><span class="text"> - Building</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-4" tabindex="0" aria-setsize="20" aria-posinset="5"><span class="text"> - Duplex</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-5" tabindex="0" aria-setsize="20" aria-posinset="6"><span class="text"> - Factory</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-6" tabindex="0"><span class="text"> - Floor</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-7" tabindex="0"><span class="text"> - Office</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-8" tabindex="0" aria-setsize="20" aria-posinset="9"><span class="text"> - Plaza</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-9" tabindex="0" aria-setsize="20" aria-posinset="10"><span class="text"> - Plot</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-10" tabindex="0" aria-setsize="20" aria-posinset="11"><span class="text"> - Shop</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-11" tabindex="0" aria-setsize="20" aria-posinset="12"><span class="text"> - Warehouse</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-12" tabindex="0" aria-setsize="20" aria-posinset="13"><span class="text">Residential</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-13" tabindex="0" aria-setsize="20" aria-posinset="14"><span class="text"> - Apartment</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-14" tabindex="0" aria-setsize="20" aria-posinset="15"><span class="text"> - Building</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-15" tabindex="0" aria-setsize="20" aria-posinset="16"><span class="text"> - Duplex</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-16" tabindex="0" aria-setsize="20" aria-posinset="17"><span class="text"> - Penthouse</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-17" tabindex="0" aria-setsize="20" aria-posinset="18"><span class="text"> - Plaza</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-18" tabindex="0" aria-setsize="20" aria-posinset="19"><span class="text"> - Plot</span></a></li><li><a role="option" class="dropdown-item" id="bs-select-5-19" tabindex="0" aria-setsize="20" aria-posinset="20"><span class="text"> - Room</span></a></li></ul></div></div></div>
    </div>
                        </div>

解决方案

方法1：纯CSS实现（基于文本前缀识别）

观察到子选项文本都带有- 前缀，可通过CSS属性选择器匹配该文本，添加左侧缩进，同时隐藏前缀避免重复显示：

/* 匹配带"- "前缀的下拉选项文本 */
.houzez-field-textual .dropdown-item .text:contains(" - ") {
    padding-left: 25px;
    position: relative;
}

/* 隐藏前缀字符 */
.houzez-field-textual .dropdown-item .text:contains(" - ")::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 100%;
    background-color: #fff; /* 与下拉菜单背景色一致 */
}

注：如果:contains选择器不生效，可改用JavaScript辅助添加类，再用CSS样式控制。

方法2：JavaScript+CSS（更稳定）

通过JavaScript识别子选项（基于文本前缀），给对应的下拉项添加自定义类，再用CSS设置缩进：

第一步：添加JavaScript代码

将以下代码添加到主题的自定义JS区域（或通过Code Snippets插件添加）：

document.addEventListener('DOMContentLoaded', function() {
    // 目标下拉框ID，替换为Location字段的ID
    const targetSelectIds = ['form-field-95424d9', 'form-field-xxx'];

    targetSelectIds.forEach(id => {
        const selectEl = document.getElementById(id);
        if(!selectEl) return;

        // 监听bootstrap-select初始化完成事件
        selectEl.addEventListener('loaded.bs.select', function() {
            const textSpans = selectEl.closest('.bootstrap-select').querySelectorAll('.dropdown-item .text');
            textSpans.forEach(span => {
                if(span.textContent.trim().startsWith('- ')) {
                    span.parentElement.parentElement.classList.add('child-option');
                }
            });
        });

        // 手动刷新下拉框确保样式生效
        $(selectEl).selectpicker('refresh');
    });
});

第二步：添加CSS代码

在主题自定义CSS区域添加：

/* 子选项缩进样式 */
.houzez-field-textual .child-option .dropdown-item {
    padding-left: 25px;
}

/* 可选：给父选项添加加粗样式区分层级 */
.houzez-field-textual .dropdown-item:not(.child-option) .text {
    font-weight: 600;
}

方法3：修改主题源数据（从根源解决）

如果上述方法仍不生效，可直接修改Houzez主题中生成下拉选项的代码：

找到主题中生成房产类型/位置的PHP文件（通常在includes或templates目录下，如template-search.php或class-houzez-search.php）
找到生成<option>标签的循环代码，给子选项添加class="child-option"属性
再通过CSS给.child-option对应的下拉项设置缩进样式

注意事项

若使用缓存插件，修改后需清除缓存才能生效
自定义代码建议通过子主题添加，避免主题更新时丢失修改

内容的提问来源于stack exchange，提问作者Mr-x

Houzez主题搜索表单Type下拉框样式自定义问题求助

问题描述 #

解决方案 #

方法1：纯CSS实现（基于文本前缀识别） #

方法2：JavaScript+CSS（更稳定） #