.c-checkboxでチェックボックスを表示した際、テキスト(.c-checkbox__label)の位置がズレている

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #48721
    Kmical Lights
    参加者

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】v9.3.3
    【お使いのブラウザ】Safari
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===
    Snow Monkeyの場合だけではない気もしますが、
    チェックボックスを使う際にチェックするinput要素に対して、テキストとinput要素の間のマージンがない状態で下方向にズレたように表示されてしまっているようです。
    高さを揃えた中央値でマージンを取った形で美しく表示されるとありがたいです。

    0
    #48746
    キタジマ タカシ
    キーマスター

    Basis は「必要最小限のデフォルト CSS しか提供しない」という方針なので、マージンは付与していません。縦位置についてはデフォルトで中央揃えしても良いかもしれませんが、こちらもやるなら display: flex にすることになり、別の影響もありそうなので今はデフォルトでは提供していません。

    次の Snow Monkey のメジャーアップデートにあわせて Basis もメジャーアップデートするので、いっそのことフォーム周りの CSS は全面的に変更しても良いかなとは考えています。Snow Monkey Forms 用にゼロベースで書いたフォーム用 CSS を流用する形で…。

    0
    #49052
    キタジマ タカシ
    キーマスター

    Snow Monkey v10 で、内包する Basis もアップデートしました。チェックボックスの HTML 構造は下記に変更になりました。

    <label>
      <span class="c-checkbox">
        <input type="checkbox" class="c-checkbox__control">
        <span class="c-checkbox__label">...</span>
      </span>
    </label>

    ちなみに、これまで JS を使って無理くりどのブラウザにもデザインを適用するようにしていましたが、そこまでする必要性も減ってきていると思うので、最新版では、レガシーブラウザにはデザインが反映されず(ブラウザデフォルトのデザインになる)、モダンブラウザには Basis のデザインが反映されるようになっています。

    0
    #49065
    Kmical Lights
    参加者

    おー、ありがとうございます。調整しやすくなった感じですねー。
    Basisのスタイルの方も兼ねて再度HTMLを見直さねば(汗)

    トピック閉じます。

    0
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • トピック「.c-checkboxでチェックボックスを表示した際、テキスト(.c-checkbox__label)の位置がズレている」には新しい返信をつけることはできません。