3

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.

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.

2
  • I'm pretty sure you can't disable this as it's coded as the default behavior in Chrome.
    – VVV
    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
    Apr 2, 2020 at 5:42

4 Answers 4

3
.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.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: 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 compatibility.

3
  • 1
    But this will disable user to selecting the text. I want to let the user select the text.
    – hendry91
    Apr 2, 2020 at 6:19
  • will :active pseudo help help you.
    – Hyperx837
    Apr 2, 2020 at 6:46
  • @Hyperx837 what do you mean regarding the :active pseudo element? Any way to make this work and allow user to select text at the same time?
    – Alvaro
    Feb 1 at 16:29
2

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

1
2

try this:

-webkit-tap-highlight-color: transparent;
2

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.com/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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.