Craft 3 のラジオボタンフィールドを横並びにする

2019-10-22
1分で読了
更新: 2025-12-26

目次

Craft CMS で標準で用意されているラジオボタンフィールド。初期状態では縦に並ぶようになっています。

これを横に並べてみたいと思います。

Control Panel CSS プラグインをインストール

プラグインストアから「Control Panel CSS」プラグインをインストールします。

CSS を追加

「設定 > プラグイン」のところにある「Control Panel CSS」の設定を開き、「Additional CSS」のところに下記の CSS を追加します。

/* Horizontal Radio Group */
.radio-group {
 display: flex;
}
.radio-group > div {
 margin-right: 10px;
}

もし、特定のフィールドのみ適用させたい場合は下記のようにフィールドを限定します。

/* Horizontal Radio Group */
#fields-beeEzyUploaderStatus-field .radio-group {
 display: flex;
}
#fields-beeEzyUploaderStatus-field .radio-group > div {
 margin-right: 10px;
}

以上です。

この記事をシェア

関連記事