Стилизация листовки в виде кнопки-флажка

Question

Я создал несколько элементов управления на листовой карте, которые я хотел бы использовать в качестве флажков, стилизованных под кнопки, т. Е. Это кнопка, стилизованная по-разному при нажатии, и возвращающаяся к исходному стилю при повторном нажатии.

Я могу изменить стиль при наведении, используя CSS или что-то вроде этого:

var MyCustomControl = L.Control.extend({
                        options: {
                            position: 'topright'
                        },
                        onAdd: function (map) {
                          var container = L.DomUtil.create('checkbox', 'my-custom-control');
                          container.onmouseover = function(){

                               container.style.backgroundColor = 'blue'; 

                          }
                          container.onmouseout = function(){

                               container.style.backgroundColor = 'pink'; 

                          }
                          ....

Но я просто не могу заставить его работать при использовании onmouseclick - и я нене так, как я должен делать это в CSS.Мой css с зависанием выглядит так:

.my-custom-control {
        padding: 1px 4px;
        background: rgba(255,255,255,0.7);
        color: black;
        font: 10px Arial, sans-serif;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        width: 55px;
        cursor: pointer;
}

.my-custom-control:hover{

        background: rgba(255,255,255,0.9);
        border: 2px solid blue;


}

.my-custom-control:empty {
        display: none;
}           

Answer 1

Я заставил его работать, используя:

container.onclick = function(){ container.classList.toggle("selected_transportation"); }

Где "selected_transproduction" - это класс css, описывающий стиль при нажатии.И получается, что причина, по которой я не смог заставить работать это простое решение:

container.style.backgroundColor = 'pink'; 

, была в том, что я случайно написал «onmouseclick» вместо «onclick»:)