Есть ли способ «размещать метки» при оформлении заказа woocommerce? (например, Shopify) ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести опыт оформления заказа Shopify на своей странице оформления заказа WooCommerce, анимируя метки, когда пользователь фокусируется на определенном вводе, вот так:




Я пробовал использовать метку input:focus ~, но это не сработало, поскольку входные данные WooCommerce по умолчанию находятся внутри диапазона (.woocommerce-input-wrapper ) вот так:

Код: Выделить всё

Nombre *






.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;
}

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/543 ... ke-shopify