2

Tengo una selección múltiple y me gustaría poder hacer clic en ella para manejar las respuestas en una página /getmatch. Por el momento no tengo ninguna señal visual de que he seleccionado cosas:

introducir la descripción de la imagen aquí

Entonces ¿cómo hacer que la selección de varios elementos responda?

Aqui esta el codigo de la pagina que da estos botones:

{% extends "todo/base.html" %}

{% block content %}

   <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li.item {
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <section class="content-section-a">

    <div class="container">
      <dt>
        <span>Pick the keywords you want to express when wearing perfume</span>
      </dt>

    <form action = "/getmatch" method="POST">
      {% for keyword in keywords %}
        <div class="elements">
            <ul class="items ">
               <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
                 <div class="box">
                 <div data-toogle="buttons" class="col">
                    <span>{{ keyword.title }}</span>
                 </div>
                 </div>
               </li>
            </ul>
        </div>
      {% endfor %}
      {% csrf_token %}
        <button type="submit">Envoyer</button>
    </form>
    </div>
  </section>

  <!-- Bootstrap core JavaScript -->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/popper/popper.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >


{% endblock %}

Intenté anadir cosas en la balisa

button:hover{background-color:orange;}

button:focus{background-color:red;}

Pero no modifiqué cualquiera cosa.

Con CSS

<style>
  .elements {
    display: block;
  }
  .items {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
  }
  .item {
    flex: 1 0 20%;
    padding: 8px;
    margin: 2px;
    border-radius: 8px;
    border: 1px solid rgba(61, 86, 233, 0.3);
    text-align: center;
  }
  .col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item:hover { background-color:orange; }

  .item-check {
    display: none;
  }
  .item-name {
    padding: 8px;
    margin: 2px;
    border-radius: 8px;
    border: 1px solid rgba(61, 86, 233, 0.3);
    text-align: center;
  }
  .item .item-check:checked + .item-name {
    background-color: rgba(61, 86, 233, 0.3);
  }

</style>

...

<form action = "/getmatch" method="POST">
  {% for keyword in keywords %}
    <div class="elements">
        <ul class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
          <li class="item">
            <label>
              <input class="item-check" name="keywords[]" type="checkbox" value= {{ keyword.title }} />
              <div class="item-name">{{ keyword.title }}</div>
            </label>
          </li>
        </ul>
    </div>
  {% endfor %}
  {% csrf_token %}
    <button type="submit">Envoyer</button>
</form>

Pero tengo este situacion con la animacion .item:hover alrededor del nombre y me gustaría que el botón interior se extendiera hasta este .item:hover :

introducir la descripción de la imagen aquí

4
  • 1
    el elemento con la clase col supongo que son los botones que salen no?. De ser así podrías con JQuery o JavaScript detectar el evento click y asignar un color al elemento que has hecho click. el 2 feb. 2021 a las 12:05
  • 1
    Mejor que un color, una clase CSS
    – SJuan76
    el 2 feb. 2021 a las 12:06
  • @Sjuan76 mejor mejor. el 2 feb. 2021 a las 12:08
  • @SJuan76 ¡Con mucho gusto! ¿Cómo lo hago? el 2 feb. 2021 a las 12:24

2 respuestas 2

2

Si la intención es usar solo CSS, entonces podrías hacerlo así:

  • Por cada keyword creamos un <label>
  • Dentro de cada <label> metemos:
    • un <input type="checkbox">el cual almacenará el valor del keyword
    • un <div> en el cual se visualizará el nombre del keyword

Cada vez que se haga click en el <label>, el <input> dentro cambiará de seleccionado (checked) a no seleccionado (unchecked).

Utilizando la pseudo-clase :checked y el selector de hermano adyacente (+) podremos cambiar los estilos del <div> cuando el <input> este seleccionado.

Ejemplo:

.elements {
  display: block;
}
.items {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column;
}
.item {
  flex: 1 0 20%;
}
.item-check {
  display: none;
}
.item-name {
  padding: 8px;
  margin: 2px;
  border-radius: 8px;
  border: 1px solid rgba(61, 86, 233, 0.3);
  text-align: center;
}
.item-check:checked + .item-name {
  background-color: rgba(61, 86, 233, 0.3);
}
.item-name:hover,
.item-check:checked + .item-name:hover {
  background-color:orange;
}
<form action="/getmatch" method="POST">
  <div class="elements">
    <ul class="items">
      <li class="item">
        <label>
          <input class="item-check" name="keywords[]" type="checkbox" value="1" />
          <div class="item-name">Keyword 1</div>
        </label>
      </li>
      <li class="item">
        <label>
          <input class="item-check" name="keywords[]" type="checkbox" value="2" />
          <div class="item-name">Keyword 2</div>
        </label>
      </li>
    </ul>
  </div>
  <button type="submit">Envoyer</button>
</form>

5
  • Es exactamente lo que busco. Sin embargo tengo problemas con los ul. Voy a puestar mia pregunta al dia el 2 feb. 2021 a las 14:28
  • @RevolucionforMonica el problema con los li es porque no has copiado correctamente mi CSS ni el HTML
    – Marcos
    el 2 feb. 2021 a las 17:07
  • Sí, lo siento... ¿sabes que puedo ponerlos uno al lado del otro mientras no se desborde a la derecha? el 2 feb. 2021 a las 18:03
  • @RevolucionforMonica, ¿podrías compartirme un ejemplo de lo que te sucede? No me queda claro cual es el problema, entiendo que puede ser un problema de overflow. PD: he actualizado mi respuesta para mejorar el efecto hover
    – Marcos
    el 2 feb. 2021 a las 18:14
  • Por seguro, es una pregunta que he tratado de resolver sin éxito durante varios días. el 2 feb. 2021 a las 18:16
0

Solución con jQuery:

  1. Exporta el cdn de jQuery (o descargalo a tu local): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  2. Añade una clase css (o lo haces directamente con jQuery).

.botonSeleccionado {
    background-color: aqua;
}
  1. Añade la clase boton(si quieres cambiarla por algo más descriptivo mejor.) al elemento html.
<div data-toogle="buttons" class="col boton">
</div>
  1. Crea un fichero tipo JavaScript ejemplo.js. Modificar según tus preferencias.
<script>
   $(document).ready(function() {
      ponerColor();
   });
   function ponerColor() {          
      $('.boton').on('click', function() {
         $(this).addClass('botonSeleccionado');
      })
    }
</script>
1
  • 2
    Creo que deberías usar toggleClass, de lo contrario no volver a "no seleccionado"
    – Marcos
    el 2 feb. 2021 a las 14:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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