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;
}以上です。