フォームブリッジにて特定の長文を小窓にまとめて表示する方法

[mtnk]

お世話になっております。
・実現したいこと
トヨクモのフォームブリッジにて長文のラベルを小窓にまとめて、その中でスクロールして確認出来るものを考えております。

・実施したこと
下記URLにて似た質問が投稿されており、同様のcssファイルを作成し実装してみました。

長文を小窓にまとめて表示する方法

たしかに実現は出来たのですが、この手法ですと同じフォーム内すべてのラベルフィールドに適用されてしまい、すべてのラベル右側にスクロールバーが表示されてしまいます。

・作成したCSSコード
.ql-editor {
max-height: 200px;
overflow-y: scroll;
display: block;
}

特定のラベルのみ小窓内でスクロール確認出来るようなカスタマイズ方法がございましたら、ご教授頂きたいです。

よろしくお願いいたします。

[aaa]

複数のラベルフィールドがあるのでCSSの指定では、すべてのラベルフィールドに適用されてしまうという課題と理解しました。

CSSでやるなら、このあたりを参照するのだろうと思います。
:nth-of-type() - CSS: カスケーディングスタイルシート | MDN

:nth-of-type() - CSS: カスケーディングスタイルシート | MDN

JavaScriptで設定したほうが楽かなと思いました。

(function () {
    "use strict";

    fb.events.form.mounted = [function (state) {
        // フィールドコードが label のフィールドの要素を取得します
        const labelField = fb.getElementByCode('label');
        // 指定されたクラスやIDなどを持つ要素をすべて取得
        const elements = labelField.querySelectorAll('.ql-editor');

        // 取得した要素の中からlabel要素のみをフィルタリングし、スタイルを適用
        elements.forEach(element => {
            if (element.tagName === 'LABEL') {
                element.style.maxHeight = '200px';
                element.style.overflowY = 'scroll';
                element.style.display = 'block';
            }
        });
        return state;
    }];
})();

上側のラベルには フィールドコードが labelで、下側は label1に設定してあります。