How to Disable onclick text highlight in mobile browser (Chrome)?


I’m using Boostrap 4 to build a Web. A simple code such as below:

<div class="col-12 p-2" id="Maincourse">  
  <h1 class="m-0">Main course</h1> 

I use my Android Chrome Browser(version 80.0.3987.149) click on the text, it will highlighted the text and popup google search.

enter image description here

How can i disable it? I Don’t want to set user-select: none because I need to let the user highlight the text when long press.


.disable-select {
  user-select: none; /* standerd */
  -moz-user-select: none; /* firefox specific */
  -webkit-user-select: none; /* Chrome, Opera and Safari*/
  -ms-user-select: none; /* IE, ms-edge */


version compatibility


Chrome: 54+
Firefox: 69+
Opera: 15+
Safari: 3+
MS Edge: 12+
IE: 10+


Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+

refer to the sources for more info and version compatibility.

Answered By – Hyperx837

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published