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>