ラジオボタンの色を変更したい
ラジオボタンの色を変えたい
今このような状態ですが、
クリックしたときに周りのを囲むグレーの部分を黄色にしたいです。
また、クリックしたらラジオボタンも黄色になるようにしたいのですが、
ラジオボタンのように枠線の中に丸がある形を作れず、今は枠線のみになっています。
現在のコードはこちらです。
よろしくお願いします。
<form id="radio-button">
<div class="form-check">
<input class="form-check-input" type="radio" name="maker" value="個人" onclick="formSwitch()" checked>
<label class="form-check-label"> 個人</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="maker" value="法人" onclick="formSwitch()">
<label class="form-check-label"> 法人</label>
</div>
</form>
label.form-check-label{
position: relative;
top:-1px;
color: #707070;
font-weight: 400;
font-size: 13px;
}
input[type=radio] {
transform: scale(2);
margin: 6px 15px 0 0;
cursor: pointer;
display: none;
}
#radio-button{
display: flex;
padding: 10px;
width: 300px;
margin: 0 auto;
}
#radio-button .form-check{
padding: 10px 23px;
border: 1px solid #D8D8D8;
margin: 39px auto;
border-radius: 50px;
font-size: 13px;
}
input[type='radio']{
width: 12px;
height: 12px;
border-radius: 15px;
top: 0px;
left: -1px;
position: relative;
background-color: #fff;
content: '';
display: inline-block;
visibility: visible;
border: 1px solid #D8D8D8;
}
input[type='radio']:checked:after {
width: 10.3px;
height: 10.3px;
border-radius: 13px;
top: -1.3px;
left: -1.3px;
position: relative;
content: '';
display: inline-block;
visibility: visible;
border: 1px solid #F5D800;
}
input[type='radio'] {
-webkit-appearance: none;
}
0
