html - bootstrap float 标签方向为rtl时滑动到中心

Question

我正在尝试使用 bootstrap v5.2 以希伯来语显示 float 标签。 问题是，当我单击输入框时将方向更改为 rtl 时，标签会向中间滑动。

我的代码:

<div class="form-floating mb-3" dir="rtl">
        <input class="form-control" id="title" placeholder="כותרת"></input>
        <label for="title">כותרת</label>
</div>

You can see that the text moves to the center and does not stay adjacent to the right

我尝试仅在标签中将方向更改回 ltr，它有效，但在希伯来语中看起来不太好(粘在框的左侧)。

Answer 1

添加自定义类并使用这些 CSS 代码:

<style>
    .form-floating.custom-class>label {
        top: 0;
        right: 0;
        transform-origin: 100% 0;
        transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    }
    .form-floating.custom-class>.form-control-plaintext~label, .form-floating.custom-class>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(-0.15rem);
    }
</style>


<div class="form-floating mb-3 custom-class" dir="rtl">
    <input class="form-control" id="title" placeholder="כותרת"></input>
    <label for="title">כותרת</label>
</div>