ドラゴンクエスト風CSSラジオボタンデザイン

ドラゴンクエストのコマンドウィンドウ風ラジオボタンです。

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container { display: grid; place-items: center; width: 100vw; height: 100vh; box-sizing: border-box; background-color: #000000; } .radio-group { position: relative; padding: 1.5rem 1rem 0.5rem 1rem; border-radius: 5px; border: 3px solid #fff; color: #fff; font-family: 'DotGothic16', sans-serif; font-size: 20px; font-weight: bold; z-index: 0; } .radio-group::before { position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); background-color: #000; content: attr(data-title); } .radio-area { margin-bottom: 0.5rem; } .radio-area input[type=radio] { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: .3s; } .radio-area label { cursor: pointer; } .radio-area input[type=radio]:checked::before { position: absolute; top: -.4rem; left: -0.2rem; width: 0; height: 0; border: solid 7px transparent; border-left-color: #fff; margin-top: -7px; content: ''; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 450px; height: 253.125px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container"> <div class="radio-group" data-title="らじお"> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg1" checked=""> <label for="rdobg1">たたかう</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg2"> <label for="rdobg2">にげる</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg3"> <label for="rdobg3">ぼうぎょ</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg4"> <label for="rdobg4">どうぐ</label> </div> </div> </div> </body></html>

ラベルに背景を入れたCSSラジオボタンデザイン

チェック時に背景をラベルに入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container { display: grid; place-items: center; width: 100vw; height: 100vh; box-sizing: border-box; background-color: #fefefe; } .radio-group { display: flex; column-gap: .5rem; margin-bottom: 0.5rem; padding: 1rem 0.5rem; border: 1px solid #333; } .radio-area input[type=radio] { display: none; } .radio-area label { cursor: pointer; padding: 0.5rem; color: #333; transition: .5s; } .radio-area input[type=radio]:checked+label { color: white; background-color: #41e0dd; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 450px; height: 253.125px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container"> <div class="radio-group"> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg1" checked=""> <label for="rdobg1">OPTION1</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg2"> <label for="rdobg2">OPTION2</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg3"> <label for="rdobg3">OPTION3</label> </div> </div> </div> </body></html>

背景を入れたCSSラジオボタンデザイン

before疑似要素で背景を入れてます

<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container { display: grid; place-items: center; width: 100vw; height: 100vh; box-sizing: border-box; background-color: #fefefe; } .radio-area { position: relative; margin-bottom: 0.5rem; padding: 0.8rem 1rem 0.8rem 0.7rem; z-index: 0; } .radio-area input[type=radio] { width: 15px; height: 15px; margin-top: -4px; border-radius: 50%; background-color: #eee; border: 3px solid #eee; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; transition: .3s; } .radio-area input[type=radio]:checked { background-color: #e69138; } .radio-area input[type=radio]::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fce5cd; border: 1px solid #e69138; content: ''; z-index: -1; } .radio-area input[type=radio]:checked::before { background-color: #e69138; } .radio-area input[type=radio]:checked+label { color: white; } </style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 450px; height: 253.125px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container"> <div class="radio-group"> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg1" checked=""> <label for="rdobg1">背景入りラジオボタン</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg2"> <label for="rdobg2">背景入りラジオボタン</label> </div> <div class="radio-area"> <input type="radio" name="rdo_bg" id="rdobg3"> <label for="rdobg3">背景入りラジオボタン</label> </div> </div> </div> </body></html>