今回はCSSでラジオボタンに背景を入れて縦に並べる方法について解説します。
「appearance: none;」を指定しデフォルトのスタイルをオフにしbefore疑似要素で背景を入れてます。
以下作り方の手順です。
垂直方向に並べる
「radio-area」クラスを3つ作り、タグ内に「input」と「label」を配置。「margin-bottom: 0.5rem;」での下部に余白を入れます。
<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 ..></div>
<div class="radio-area"><input ..></div>
</div>
.radio-area {
position: relative;
margin-bottom: 0.5rem;
padding: 0.8rem 1rem 0.8rem 0.7rem;
z-index: 0;
}ラジオボタンをカスタマイズ
「appearance: none;」で標準のラジオボタンを隠す。「border-radius: 50%;」で丸枠にし、境界線を設定。選択時に背景を変えてます。
.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;
}
背景を入れる
input[type=radio]のbefore疑似要素で境界線と背景を入れ、選択時に文字色と背景色を変えるよう設定してます。
.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;
}
全てのソース
コードを表示
<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>
.radio-area {
position: relative;
margin-bottom: 0.5rem;
padding: 0.8rem 1rem 0.8rem 0.7rem;
z-index: 0;
}
.radio-area input[type=radio] {
cursor: pointer;
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 label {
cursor: pointer;
}
.radio-area input[type=radio]:checked {
background-color: #e69138;
}
.radio-area input[type=radio]::before {
cursor: pointer;
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;
}HTML・CSSのカスタマイズや動作確認ができます
