Studioカスタムコード
Studioでラジオボタンの色を変える方法
2025年12月時点の実装方法です。
Studioの仕様変更等によって、今後本記事のコードが使えなくなる可能性もありますので、あらかじめご了承ください。
また、本記事のコード以外でも実装できる方法はありますので、参考のひとつとしてご覧いただければ嬉しいです。
カスタムコードはこちら
ラジオボタンのチェック前後の色や大きさは、自由に変更できます。
コード右上のコピーボタンから一括コピーできます。
<style>
input[type="radio"] {
/* チェック前の色 */
background: #f5f5f5;
/* ラジオボタンの大きさ */
width: 20px !important;
height: 20px !important;
position: relative;
border-radius: 50%;
appearance: none;
border: none;
}
input[type="radio"]::before {
/* チェックされた時の色 */
background: #ff0000;
/* ラジオボタンの大きさ */
width: 12px;
height: 12px;
position: absolute;
border-radius: 50%;
content: "";
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity: 0;
}
input[type="radio"]:checked::before {
opacity: 1;
}
</style>カスタムコードの追加手順
①フォーム追加後、「Blank」を追加
②追加した「Blank」（iframe）をフォームに追加
追加した「Blank」（iframe）をフォームの中に移動します。
iframeは「幅：0px、高さ：0px、背景色：なし」に変更します。
③「Blank」（iframe）にカスタムコードを入力
先ほどコピーしたカスタムコードを「埋め込みコード」に入力します。
④ライブプレビューで確認
任意の色になっていたら完成です！
