如何用JavaScript/CSS交换WordPress Elementor表单label与input标签位置

在WordPress中使用Elementor时，无法直接修改表单的HTML结构，需要通过JavaScript或CSS交换表单内label与input标签的位置。

尝试的CSS代码如下：

input:focus > .elementor-field-label {
    border: 1px solid black !important;
    border-radius: 5px;
    transform: translate(0px, -20px);
    font-size: 14px;
}

该代码因标签位置问题无法生效。

之后尝试的JavaScript代码：

$('label').each(function() {
   $(this).insertAfter($(this).nextAll('input:first'));
});

同样无法生效。

表单对应部分的HTML结构：

<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required">
     <label for="form-field-name" class="elementor-field-label"> Texto </label>
     <input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-sm  elementor-field-textual" required="required" aria-required="true">
</div>

一、JavaScript 实现DOM结构上的位置交换 #

之前的JS代码失效原因：一是未确保代码在DOM完全加载后执行，二是选择器逻辑冗余且可能误选页面其他label标签。

原生JS版本（无需jQuery） #

document.addEventListener('DOMContentLoaded', function() {
  // 仅定位Elementor表单内的标签
  const formLabels = document.querySelectorAll('.elementor-field-group .elementor-field-label');
  
  formLabels.forEach(label => {
    // 通过label的for属性匹配对应的input
    const targetInput = document.getElementById(label.getAttribute('for'));
    
    // 确认input存在且和label同属一个父容器
    if (targetInput && targetInput.parentElement === label.parentElement) {
      // 将label插入到input的后面
      targetInput.insertAdjacentElement('afterend', label);
    }
  });
});

jQuery版本（需页面已加载jQuery） #

jQuery(document).ready(function($) {
  $('.elementor-field-group .elementor-field-label').each(function() {
    const $label = $(this);
    const $input = $('#' + $label.attr('for'));
    
    if ($input.length && $input.parent().is($label.parent())) {
      $label.insertAfter($input);
    }
  });
});

二、CSS 视觉层面交换位置（不修改DOM） #

如果不需要改变DOM结构，仅在视觉上让label显示在input之后，可通过Flex布局实现，同时修复你原来的聚焦样式：

/* 给表单分组容器设置flex布局，反转元素排列顺序 */
.elementor-field-group {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px; /* 可根据需求调整label和input的间距 */
}

/* 使用相邻兄弟选择器（+）替代子选择器，修复聚焦样式 */
.elementor-field:focus + .elementor-field-label {
  border: 1px solid black !important;
  border-radius: 5px;
  transform: translate(0px, -20px);
  font-size: 14px;
}

说明：原CSS失效是因为使用了子选择器>，但label和input是同级元素，并非父子关系，所以需要改用相邻兄弟选择器+来匹配input后的label。

内容的提问来源于stack exchange，提问作者EricMameluk