¿Cómo puede Javascript cambiar las propiedades CSS de input:checked

HTML

 <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; } }

Digamos que quiero cambiar su color de fondo-

JS

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

Ahora quiero que cuando elija el color en el "cuadro de entrada de color" de html, Javascript tome el valor del color y lo use para ese "fondo de botón de radio".

Pero no sé cómo apuntar a la "entrada de campo de cambio: marcado + etiqueta"