css 引导浮动标签在方向为rtl时滑动到中心

mwg9r5ms 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(145)

我尝试使用bootstrap v5. 2显示希伯来语的浮动标签。问题是当我将方向更改为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只在标签，它的工作，但它不好看希伯来语（坚持左侧的方块）.

css

来源：https://stackoverflow.com/questions/75734889/bootstrap-floating-labels-slides-to-the-center-when-the-direction-is-rtl

1条答案

按热度按时间

taor4pac1#

添加一个自定义类并使用以下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>

展开查看全部

赞(0）回复(0）举报 2023-03-20

我来回答

css 引导浮动标签在方向为rtl时滑动到中心

1条答案

相关问题

热门标签

最新问答