我在wordpress中使用elementor,我不能直接修改html,所以我需要在表单中用javascript(或css,如果可能的话)交换两个标签。
我在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'));
});
- 但不起作用 *
那么,我怎样才能做到这一点呢?
FIY:表单的此特定部分的结构如下:
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required"> /*Using just the elementor-field-group*/
<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>
1条答案
按热度按时间mzmfm0qo1#
使用CSS,您可以执行以下操作:
这不会改变HTML的结构,但在视觉上它们会交换位置。
使用Javascript,您可以这样做:
这个脚本只是获取标签并将其再次追加到父级,因此它将是 Package 器的最后一个子级。
或者这样,在
label
之前添加input
元素。如果 Package 器中有多于这两个元素,这将是更好的解决方案。