Как добавить стиль при нажатии на элемент?

У меня есть такое меню:

<div class="dropdown-checkbox">
                <label class="label-title"><p>SELECT</p></label>
                <ul>
                  <li><input type="checkbox" value="Tom" v-model="selector">
                    <label>Tom</label></li>
                  <li><input type="checkbox" value="Bob" v-model="selector">
                    <label>Bob</label></li>
                  <li><input type="checkbox" value="Sam" v-model="selector">
                    <label>Sam</label></li>
                  <li><input type="checkbox" value="Alice" v-model="selector">
                    <label>Alice</label></li>
                </ul>
              </div>

Стили:

.dropdown-checkbox {
      position: relative;
      display: inline-block
    }

    .dropdown-checkbox .label-title {
      font-size: 13px;

    }

    .dropdown-checkbox ul {
      position: absolute;
      bottom: -120%;
      left: 114%;
      background: #cacaca;
      list-style: none;
      min-width: 180px;
      margin: 0px;
      padding: 0px;
      display: none;
      z-index: 1;
      border: 1px solid #9c9c9c;
    }

    .dropdown-checkbox ul li {
      font-size: 15px;
      padding: 10px;
      border-bottom: 1px solid #a5a5a5;
      margin: 0px;
    }

    .dropdown-checkbox ul li input {
      margin-right: 10px;
    }

    .dropdown-checkbox:hover ul{
      display: block;
    }

Я хочу сделать так, чтобы меню открывалось не при наведении(hover) на элемент, а при нажатии(click) на него.
Как добавить стиль display: block; при нажатии на элемент? Можно использовать vue/html/css/js