如何将标签放在跨度元素内 wpcf7-form-control-wrap

Question

我想将输入元素的标签放在由 cf7 短代码生成的 span 元素中 - 这可能吗？

我想这样做的原因是我试图让标签只在输入字段有 :focus

时出现

为了做到这一点，标签和输入需要在同一个元素内，这样我就可以使用以下 css 选择器来定位：

input-ID:focus + .label-class

我试过将生成的 HTML 标记粘贴到 CF7 中并将标签移动到里面（而不是使用短代码），这实现了我想要的，但是它会导致一个奇怪的问题，其中“必需”属性不再有效 - 所有字段都是必需的，但现在可以提交空的表单

这是 CF7 生成的内容：

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>

这就是我想要的：

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name">
<label for="your-name" class="label-helper">Name</label></span>

我已经尝试实施上面的 HTML 而不是使用 CF7 短代码，但 required 不再有效

Answer 1

请检查它可能会有帮助。我认为你在每个函数中或通过循环使用..

var getLabel = $(".wpcf7-form-control-wrap").next("label").detach();
        $(".wpcf7-form-control-wrap").append(getLabel);

.wpcf7-form-control:focus + .label-helper{color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>

Answer 2

这对我有用

    var spans = document.getElementsByClassName("wpcf7-form-control-wrap");
    for(var i=0;i<spans.length;i++)
    {
        var input = spans[i].nextSibling;
        if(input != null)
        {
            if(input.tagName == "LABEL")
            {
                spans[i].appendChild(input);
            }   
        }   
    }

如何将标签放在跨度元素内 wpcf7-form-control-wrap

How to place label inside the span element wpcf7-form-control-wrap

html

css

wordpress

jquery

contact-form-7

input-ID:focus + .label-class