有没有办法在woocommerce结帐中“浮动标签”？ （例如Shopify）

Question

我试图通过在用户关注特定输入时使标签动画化来复制WooCommerce结帐页面中Shopify结帐的体验，就像这样：

Floating labels - Image from Matt D. Smith

我尝试使用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;
}

mu 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');

})