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

Issue

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> 
</div>

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

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.

Solution

.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 */
}

Source1: https://www.w3schools.com/cssref/css3_pr_user-select.asp
Source2: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

version compatibility

desktop:

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

mobile

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