Hightlight buttons on click with CSS - html

Question

I have a multiple selection and would like to be able to click on it to manage the answers on a /getmatch page. At the moment I have no visual cue that I have selected things:
[]]1
So how to make the selection of multiple items responsive?
Here is the code from the page that gives these buttons:
{% 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 %}
I tried to add things in the balisa .
button:hover{background-color:orange;}
button:focus{background-color:red;}
But it didn't modified anything

Answer 1

I can't add a comment since i don't have the required rep points (new to stack overflow, sorry if this isn't allowed), but I am not sure what you're trying to do, if you want to give a visual cue that a button has been selected for more than one button at a time, you need to grab the list of buttons, add an event listener on click that toggles a class on/off, then add styling to that class, so that when the item has that class it has a specific style.
Edit on how to do that:
P.S i've never used Django, but i think you should do this, since the way you're doing it is generating a ul for each keyword
<form action = "/getmatch" method="POST">
<div class="elements">
<ul class="items ">
{% for keyword in keywords %}
<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>
{% endfor %}
</ul>
</div>
{% csrf_token %}
<button type="submit">Envoyer</button>
</form>
Now you need to select the list elements, an easier way to do this would be something called event delegation https://javascript.info/event-delegation
so create a script tag/or file and import it, inside your script you neeed the following :
//Select the UL list
const myItemsList = document.querySelector(".items");
//function passed to event listener as callback, toggles the selected class if the target is a list
const toggleListClass = (event) => {
let target = event.target;
if (target.tagName !== "li") return;
target.classList.toggle("highlight");
};
//Add an event listener to the ul list
myItemsList.addEventListener("click", toggleListClass);
Now in your css add a selector for class hightlight
.hightlight {
color: whatever
}