How to fix the flimsy "accidental select text" issue when clicking Leaflet "checkboxes"?

Question

In the top-right corner button thing, when you click on either the checkboxes or the texts next to the checkboxes, it's extremely easy to accidentally "select all" or "select" the word you click on. This makes the whole experience feels "cheap" and "alpha"/buggy.

Is there an easy way around this? Why does it behave like this?

score 0 · Accepted Answer · answered Feb 17 '18 at 10:14

0

The text select event can be prevented by adding the following CSS to the wrapper of the checkboxes:

selector {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

You can find more methods in this article.

answered Feb 17 '18 at 10:14

NettaB

166
3
9

1

Thanks. Works. "selector" is not literal in that code, BTW; you have to enter: ".leaflet-control-layers, .leaflet-control-layers * { ... }" – Feb 19 '18 at 03:12

How to fix the flimsy "accidental select text" issue when clicking Leaflet "checkboxes"?

1 Answers1