Удалить схему управления масштабированием листовки (?)

Question

В каждом браузере на каждом мобильном устройстве, которое я пробовал, кнопки управления масштабированием имеют светло-серый контур, который не отображается в настольных браузерах. Я пробовал много CSS, чтобы избавиться от этого, но ничего не работает. Кто-нибудь знает как это убрать?

Это мой CSS для элементов управления, который делает все, что мне нужно в настольных браузерах, но не удаляет такие наброски на мобильных устройствах:

.leaflet-control-container {
    box-shadow: none !important;
    outline: 0 !important;
}

.leaflet-bar {
    box-shadow: none;
}

.leaflet-bar a, .leaflet-bar a:hover {
    background-color: #f0b034;
    border: 1px solid #065428;
}

.leaflet-bar a:first-child, .leaflet-bar a:last-child {
    border-radius: 0;
    border-bottom: 1px solid #065428;
}

Это живая страница, которую я сейчас использую для тестирования: нажмите

Answer 1

В настольном браузере вокруг элемента управления масштабированием есть тень. Определяется .leaflet-bar класс (см. листок CSS, строка 209).

.leaflet-bar {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

Для сенсорных (мобильных) устройств это определение переопределяется .leaflet-touch .leaflet-bar класс (см. строку 380).

.leaflet-touch .leaflet-bar {
    box-shadow: none;
}

.leaflet-touch .leaflet-bar {
    border: 2px solid rgba(0,0,0,0.2);
}

Вы должны быть в состоянии удалить его, переопределив это border свойство в вашем CSS.

.leaflet-touch .leaflet-bar {
    border: none;
}

Демо: http://jsfiddle.net/ve2huzxw/37/