css - woocommerce 结账时有没有办法找到 'float the labels'？ (如 Shopify)

Question

我试图通过在用户专注于某个输入时为标签设置动画来复制我的 WooCommerce 结账页面中 Shopify 结账的体验，就像这样:



我试过使用 input:focus ~ 标签，但它不起作用，因为默认的 WooCommerce 输入是在一个跨度 (.woocommerce-input-wrapper) 内，如下所示:

<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
    <label for="billing_first_name" class="">Nombre&nbsp;<abbr class="required" title="obligatorio">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
    </span>
</p>

<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
    position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
    position: absolute;
    top: 11px;
    left: 11px;
    padding: 0;
    color: #808080;
    transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
    top: -8px;
    font-size: 12px;
    font-weight: 500;
}
</style>

谢谢!

Answer 1

我希望你觉得这些代码有用
我的CSS:
标签 {}

.woocommerce form .form-row label {
    position: absolute;
    left: 10px;
    top: 15px;
}

.woocommerce form .form-row {
    position: relative;
}

label.floatlabel {
    top: -30px !important;
}

穆 jQuery :

jQuery('.woocommerce form .form-row input').click(function(){

var label = jQuery("label[for='" + jQuery(this).attr('id') + "']");

if(jQuery('floatlabel').length ){

jQuery('label.floatlabel').removeClass('floatlabel');

}

jQuery(label).addClass('floatlabel');

})