<div class="cp_ipradio">
<label>
<input type="radio" class="option-input radio" name="cpipr02" checked />
ネコ
</label>
<label>
<input type="radio" class="option-input radio" name="cpipr02" />
イヌ
</label>
<label>
<input type="radio" class="option-input radio" name="cpipr02" />
ウサギ
</label>
<label class="disabled">
<input type="radio" class="option-input radio" name="cpipr02" disabled/>
トリ
</label>
</div>
.cp_ipradio {
width: 90%;
margin: 2em auto;
text-align: left;
}
@keyframes click-wave {
0% {
position: relative;
width: 30px;
height: 30px;
opacity: 0.35;
}
100% {
width: 200px;
height: 200px;
margin-top: -80px;
margin-left: -80px;
opacity: 0;
}
}
.cp_ipradio .option-input {
position: relative;
position: relative;
top: 13.33333px;
right: 0;
bottom: 0;
left: 0;
width: 30px;
height: 30px;
margin-right: 0.5rem;
cursor: pointer;
transition: all 0.15s ease-out 0s;
color: #ffffff;
border: none;
outline: none;
background: #d7cbcb;
-webkit-appearance: none;
appearance: none;
}
.cp_ipradio .option-input:hover {
background: #d6a9a9;
}
.cp_ipradio .option-input:checked {
background: #da3c41;
}
.cp_ipradio .option-input:checked::before {
font-size: 20px;
line-height: 30px;
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
content: '✔';
text-align: center;
}
.cp_ipradio .option-input:checked::after {
position: relative;
display: block;
content: '';
-webkit-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #da3c41;
}
.cp_ipradio .option-input.radio {
border-radius: 50%;
}
.cp_ipradio .option-input.radio::after {
border-radius: 50%;
}
.cp_ipradio label {
line-height: 40px;
display: block;
}
.cp_ipradio .option-input:disabled {
cursor: not-allowed;
background: #b8b7b7;
}
.cp_ipradio .option-input:disabled::before {
font-size: 20px;
line-height: 30px;
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
content: '✖︎';
text-align: center;
}
.cp_ipradio .disabled {
color: #9e9e9e;
}