Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

342
Vistas
How to change this decorated radio button background using Javascript?

How can Javascript change CSS properties of 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;
}
} 

Lets say I want to change its background color-

JS

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

Now I want that when i choose color in html "color input box " , Javascript take the color value and use it for that 'Radiobutton background'.

But i don't know how to target the " .switch-field input:checked + label "

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

To check whether the input is checked or not:

var x = document.getElementById("myCheck").checked;

Example

Use a checkbox to convert text in an input field to uppercase:

Assuming you have an input with id=box in your html.

document.getElementById("box").value = document.getElementById("box").value.toUpperCase();
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda