.c-checkboxでチェックボックスを表示した際、テキスト(.c-checkbox__label)の位置がズレている ♥ 0 いいねをした人: 居ません このトピックには3件の返信、2人の参加者があり、最後にKmical Lightsにより4年、 7ヶ月前に更新されました。 4件の投稿を表示中 - 1 - 4件目 (全4件中) 投稿者 投稿 2020年3月22日 11:51 PM #48721 Kmical Lights閲覧者 ♥ 234 トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。 【お使いの Snow Monkey のバージョン】v9.3.3 【お使いのブラウザ】Safari 【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです) === Snow Monkeyの場合だけではない気もしますが、 チェックボックスを使う際にチェックするinput要素に対して、テキストとinput要素の間のマージンがない状態で下方向にズレたように表示されてしまっているようです。 高さを揃えた中央値でマージンを取った形で美しく表示されるとありがたいです。 ♥ 0 いいねをした人: 居ません 2020年3月23日 12:12 PM #48746 キタジマ タカシ参加者 ♥ 2421 Basis は「必要最小限のデフォルト CSS しか提供しない」という方針なので、マージンは付与していません。縦位置についてはデフォルトで中央揃えしても良いかもしれませんが、こちらもやるなら display: flex にすることになり、別の影響もありそうなので今はデフォルトでは提供していません。 次の Snow Monkey のメジャーアップデートにあわせて Basis もメジャーアップデートするので、いっそのことフォーム周りの CSS は全面的に変更しても良いかなとは考えています。Snow Monkey Forms 用にゼロベースで書いたフォーム用 CSS を流用する形で…。 ♥ 0 いいねをした人: 居ません 2020年4月1日 12:54 PM #49052 キタジマ タカシ参加者 ♥ 2421 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 いいねをした人: 居ません 2020年4月1日 4:12 PM #49065 Kmical Lights閲覧者 ♥ 234 おー、ありがとうございます。調整しやすくなった感じですねー。 Basisのスタイルの方も兼ねて再度HTMLを見直さねば(汗) トピック閉じます。 ♥ 0 いいねをした人: 居ません 投稿者 投稿 4件の投稿を表示中 - 1 - 4件目 (全4件中) トピック「.c-checkboxでチェックボックスを表示した際、テキスト(.c-checkbox__label)の位置がズレている」には新しい返信をつけることはできません。