1

Hola estoy haciendo una seleccion de colores con el input radio y quiero q seleccione solo un color, lo quiero hacer con html por que vi q se puede realizar con el label for pero a mi no me funciona , cuando elijo un color y despues otro selecciona a todos, no puedo encontrar mi error:

body{
    margin:0;
    padding: 0;
    
}

.opciones-color input , .opciones-color label{
  margin-right: 10px;
  margin-top: 10px;
}

input[type=radio]{

  cursor: pointer;

}

label{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    margin-right: 10px;
}

#negro {

 background: black;

}
 #amarillo{
  background:  yellow;

}

 #rojo {
 background:  red;
 }

 #azul{
 background:  blue;}

  #verde{
    background:  green;
  }




.opciones-color input[type="radio"] + label {
    position: relative;
    margin-rigth: 10px; 
    display: block;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
    display: inline-block;
    
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
      
</head>
<body>

     <div class="opciones-color"> 

                <input type="radio" class="negro color" name="c-negro" > 
                <label for="c-negro"  id="negro"></label> 

                <input type="radio"  class="amarillo color" name="c-amarillo"> 
                <label for="c-amarillo" id="amarillo"></label> 

                <input type="radio"  class="rojo color" name="c-rojo"> 
                <label for="c-rojo"  id="rojo"></label> 

                <input type="radio"  class="azul color" name="c-azul">
                <label for="c-azul"  id="azul"></label>
        
                <input type="radio" class="verde color" name="c-verde">
                <label for="c-verde"  id="verde"></label>

    </div>

</body>
</html>

1
  • 1
    Simple, usa el mismo name para todos, agrega un id para cada uno y su propio value (valor) el 29 ene. 2021 a las 19:01

1 respuesta 1

2

Por que para agrupar RadioButtons, se usa el name,
Mientras que para el label for, se relaciona con el id...

.boton{
  border: 2px dotted red;
  height: 25px;
}

.rb{
 border: 2px dotted blue;
 margin:10px;
}
<input class="rb" type="radio" id="male" name="gender" value="male">
  <label class="boton" for="male">Hombre</label><br>
  <input class="rb" type="radio" id="female" name="gender" value="female">
  <label class="boton" for="female">Mujer</label><br>

Por lo que tu codigo debería quedar del siguiente modo:

body {
  margin: 0;
  padding: 0;

}

.opciones-color input,
.opciones-color label {
  margin-right: 10px;
  margin-top: 10px;
}

input[type=radio] {

  cursor: pointer;

}

label {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  margin-right: 10px;
}

#negro {

  background: black;

}

#amarillo {
  background: yellow;

}

#rojo {
  background: red;
}

#azul {
  background: blue;
}

#verde {
  background: green;
}




.opciones-color input[type="radio"]+label {
  position: relative;
  margin-rigth: 10px;
  display: block;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  border: 2px solid black;
  cursor: pointer;
  display: inline-block;

}
<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css">

  </head>

  <body>

    <div class="opciones-color">

      <input type="radio" class="negro color" name="colores" id="c-negro">
      <label for="c-negro" id="negro"></label>

      <input type="radio" class="amarillo color" name="colores" id="c-amarillo">
      <label for="c-amarillo" id="amarillo"></label>

      <input type="radio" class="rojo color" name="colores" id="c-rojo">
      <label for="c-rojo" id="rojo"></label>

      <input type="radio" class="azul color" name="colores" id="c-azul">
      <label for="c-azul" id="azul"></label>

      <input type="radio" class="verde color" name="colores" id="c-verde">
      <label for="c-verde" id="verde"></label>

    </div>

  </body>

</html>

1
  • Muchas gracias ya entendi y funciona :D , Saludos!
    – computer
    el 29 ene. 2021 a las 19:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.