-2

Estoy tratando de hacer un formulario de feedback basándome de esta imagen:

Ejemplo

Quiero hacer la parte de los números (0-10) para seleccionar uno, alguien conoce como hacer desde CSS, también que al seleccionar uno ya los demás no se puedan seleccionar y tomar el valor del que está seleccionado.

Hasta ahora tengo esto hecho en con DIV

introducir la descripción de la imagen aquí

Estoy tratando de seleccionar uno, y que se deshabiliten los demás. Desconozco si existe una forma diferente a hacerlo con DIV, para que se más fácil procesar la parte de los números con JS.

4
  • Espero haber sido más claro. Commented el 26 dic. 2022 a las 21:41
  • Hola, Ayudaría mucho a la pregunta si colocas tu intento, y colocas una descripción de los errores que tuviste al hacer la pagina para que podamos ayudarte, si miras la pregunta notarás que pareciera como si quisieras que hagamos tu trabajo, pero eso no es lo que hacemos en stack overflow, solo ayudamos no hacemos trabajos ni tareas. Si quieres que otro haga tu formulario recomiendo que elijas otro sitio.
    – DABL03
    Commented el 27 dic. 2022 a las 1:46
  • Puedes leer Cómo preguntar y ejemplo mínimo verificable para las proximas preguntas que quieras hacer
    – Excorpion
    Commented el 27 dic. 2022 a las 1:53
  • No code, no parrandón. Sin ver qué estás haciendo, no vas a recibir buenas respuestas. Código EN la pregunta, como texto, que permita a otros reproducir tu problema/situación, por favor :)
    – Alfabravo
    Commented el 28 dic. 2022 a las 18:20

1 respuesta 1

0

Funcionalmente lo que tu requieres son radio button, algo como esto:

<input type="radio" id="Cal_0" name="Calificacion" value="0">
<label for="Cal_0">0</label>

<input type="radio" id="Cal_1" name="Calificacion" value="1">
<label for="Cal_1">1</label>

<input type="radio" id="Cal_2" name="Calificacion" value="2">
<label for="Cal_2">2</label>

<input type="radio" id="Cal_3" name="Calificacion" value="3">
<label for="Cal_3">3</label>

Ahora debes tener en cuenta que:

  1. Cuando varios radio buttons comparten el mismo name la selección es excluyente (solo puedes seleccionar uno) y se envía un único valor al servidor (el seleccionado). Esto es justamente lo que buscas

  2. Si haces click en el label se selecciona el radio button, esto gracias a la propiedad for que tiene el label, donde se "liga" el label a un input

Teniendo en cuenta lo último mencionado, si ocultas el radio button y le das estilo al label logras lo que tu necesitas

input[type=radio]{
   display:none;
}

input[type=radio] + label {
  border:1px solid #ccc;
  padding: 6px 10px;
  cursor: pointer;
}

input[type=radio] + label:hover 
{
  background: #6bbbf7;
}

input[type=radio]:checked + label {
  color: white;
  background: #0063bf;
}
<input type="radio" id="Cal_0" name="Calificacion" value="0">
<label for="Cal_0">0</label>

<input type="radio" id="Cal_1" name="Calificacion" value="1">
<label for="Cal_1">1</label>

<input type="radio" id="Cal_2" name="Calificacion" value="2">
<label for="Cal_2">2</label>

<input type="radio" id="Cal_3" name="Calificacion" value="3">
<label for="Cal_3">3</label>

1
  • Muchísimas gracias, por tomarte el tiempo de responder mi "incógnita", me ha servido mucho, tal y como quería. Saludos. Commented el 31 dic. 2022 a las 22:53

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