如何使用Javascript改变这个装饰单选按钮背景?

Javascript如何改变input:checked的CSS属性

<div class="switch-field">
<input id="radio-one" name="switch-one" type="radio" value="22" checked oninput="chng_cube_root(this.value)" />
<label for="radio-one">Square</label>
<input id="radio-two" name="switch-one" type="radio" value="33" oninput="chng_cube_root(this.value)" />
<label for="radio-two">Cube</label>
</div>
<div align="center">
<label for="fancyswitch" style="border:1px solid black">Switch button bg:</label>
<input type="color" id="fancyswitch" name="fancyswitch"  value="#90452f" onchange="fancyswitch()"/>
<!-Calling fancyswitch here to change color-->
<div>

CSS

.switch-field {
display:block;
width:147px;
margin:auto;
display: flex;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}

.switch-field input:checked + label {
background-color: #018786;
color:white;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
} 

比如说我想改变它的背景颜色-

function fancyswitch(){
coloor=document.getElementById("fancyswitch").value;
document.getElementsByClassName("switch-field input:checked")[0].style.background= coloor;
/*here this is not working*/
}