如何将标签放置在span元素内wpcf7-form-control-wrap

时间:2019-07-08 01:16:11

标签: jquery html css wordpress contact-form-7

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

我要这样做的原因是,我试图使标签仅在输入字段具有:focus时显示

为此,标签和输入必须位于同一元素内,因此我可以使用以下css选择器进行定位:

input-ID:focus + .label-class

我尝试将生成的HTML标记粘贴到CF7中,然后将标签移动到内部(而不是使用短代码)来实现我想要的功能,但是这会导致一个奇怪的问题,即“ required”属性不再起作用-所有字段是必需的,但现在可以将表单提交为空

这是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短代码,但不再使用

1 个答案:

答案 0 :(得分:0)

请检查是否有帮助。我认为您在每个函数或循环中都使用过。.

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>