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.

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.

• javascript
• jquery
• html
• css
• bootstrap-4

• I'm pretty sure you can't disable this as it's coded as the default behavior in Chrome. – VVV Commented Apr 2, 2020 at 4:17
• 2 @VVV but why other website won't be highlighted? for example, I try to click on stackoverflow text, it won't hightlight unless I long press. – hendry91 Commented Apr 2, 2020 at 5:42

4 Answers 4

.disable-select {
  user-select: none; /* standard */
  -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./cssref/css3_pr_user-select.asp
Source2: https://developer.mozilla/en-US/docs/Web/CSS/user-select

version patibility

desktop:

Chrome: 54+
Firefox: 69+
Opera: 41+ (15+ with vendor prefix)
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 patibility.

By adding role="dialog" into the wrapper solved my problem. But I have no idea why, anyone can explain?

try this:

-webkit-tap-highlight-color: transparent;

I've been doing the user-select: none fix for this for awhile and found it unsatisfactory, so I started searching around for a proper name for the feature in order to see if there was better fix/write-up for it and I came across this Google Developers post from Paul Kinlan (apparently the feature is called "Touch to Search"):

https://developers.google./web/updates/2015/10/tap-to-search

which describes the behavior in detail and the various ways in which you can disable or enable the behavior.

Relevant excerpts pertaining to your question:

Tap triggering is enabled for any plain text that is selectable and non interactive or not focusable. When the page has a click handler that responds to a tap on text, Touch to Search automatically detects the response and ignores it since we know the developer intended to handle the event. Using a touch-and-hold gesture to manually select text also triggers the Touch to Search bar. Users can enable or disable the feature using a preference under Chrome's Privacy settings.

As the author of a site there are often times when you don't want a tap gesture on certain element to trigger a search. To ensure that Chrome does what you intend, make those elements:

1. Focusable: add a tabindex=-1 property on the element.
2. Interactive: Use any of several standard ways to indicate that an element is interactive:
   • Use accessibility markup to indicate the element has a widget role, or widget attributes. For example, any element with role=button won't trigger. Adding accessibility markup has the added benefit that your page will be more readable by visually impaired users.
   • Any JavaScript click handler that calls preventDefault(), or manipulates the DOM or CSS will not trigger Touch-to-Search.
3. Non-selectable: using -webkit-user-select: none; Non-selectable text will not trigger Touch-to-Search even when using the touch-and-hold gesture.