WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere.

I'm uncertain if this issue is related to focus, tab order, WebView settings, or something entirely different.

To address this problem, I attempted adding the following CSS:

* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}

I also experimented with adjusting the webView Settings:

webSettings.setLightTouchEnabled(false);

Unfortunately, these attempts did not resolve the issue.

Is there a way to prevent WebView from focusing on these divs or make the highlight color invisible/transparent?

javascriptandroidhtmlcsswebview

Answer №1

For a WebView in an Android application, I implemented the following code:

* {
  -webkit-tap-highlight-color: transparent;
}

Answer №2

Did you experiment with the following CSS properties in your stylesheet?


-webkit-touch-callout: none;
-webkit-user-select: none;

If not, consider implementing them to achieve the desired effect. Additionally, you can find more information in this article: How to Disable Text Selection Using CSS

Although the topic is centered around text selection, it may offer some solutions for your specific situation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoiding white spaces in user input with Material UI (MUI)

<FormControl variant="standard"> <InputLabel className="input-box-label" htmlFor="component-helper">My Value</InputLabel> <Input id="component-helper" value={m ...

htmlreactjsformsmaterial-ui

Error message encountered in PHP due to an undefined index

My goal is to add items from a form to a table named products. The form layout can be seen here: https://i.stack.imgur.com/f9e08.png The "Add more suppliers: +" link adds a new row to the form when clicked. The corresponding script for this action is as ...

javascriptphpsqlfor-loopmysqli

How to delete strings from a variable using PHP

I am currently working on my project with the "AngularJS" invoice template. The issue I am facing is that the currency symbol appears in the sub total text box. While this is fine for display purposes, when I input data into the database, it also adds the ...

phphtmlangularjs

I. Discovering the Step-by-Step Guide on Retrieving User Information from Facebook Upon Generating App

I have set up a Facebook login for user registration on my website. However, I am only able to retrieve the profile name and user ID from Facebook. How can I access the email and other user information? Here is the data I am currently receiving from Faceb ...

javascriptphpfacebookxampp

Running the JavaScript function prior to its interval being triggered

I'm in the process of developing a PHP dashboard page with various features, but there's one particular issue that bothers me, although it's not too major. The problem I'm facing is that I have a JavaScript function that fetches data a ...

javascriptphpajax

What is the best way to retrieve JSON data like this?

Exploring My JSON Data In my JSON data, I have a collection of various resources including videos, PDFs, and notes. I'm looking for a way to display each type of resource separately. If anyone can provide assistance without the use of external libra ...

androidjson

The scroll bar remains hidden even though there are additional elements waiting to be displayed

I am currently utilizing asp.net along with entity framework 4 On my page, I have three tabs structured like this: The Challenge I'm Facing The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 ro ...

asp.netcss

Tips on customizing the appearance of two Material-UI Sliders across separate components

Looking to customize two sliders, each within their own react component. Slider in the first component const customizedThemeSlider1 = createTheme({ overrides:{ MuiSlider: { thumb:{ color: "#4442a9", marg ...

javascriptreactjsmaterial-ui

ClickListener for RecycleView

Looking to customize a RecycleView with model images and text layout? Everything is set up, but I need help implementing the onClickListener for clicking on items. Can anyone assist? FeedItem.java public class FeedItem { private String title; private Str ...

androidjsonandroid-recyclerviewonclicklistener

Share content on Facebook using a single-page application

This inquiry may not be specifically tied to a particular software stack, framework, or coding language. In the current project I'm working on, we are utilizing AngularJS for developing the front-end with a static landing page that loads real data an ...

javascriptfacebookangularjsfacebook-graph-api

Enhance Your GoJS Pipeline Visualization with TextBlocks

I am facing challenges in customizing the GoJS Pipes example to include text within the "pipes" without disrupting the layout. Although I referred to an older response on the same query here, it seems outdated or not detailed enough for me to implement wit ...

javascripttypescriptgojs

Obtain specific fields from a multidimensional array object using lodash

My dilemma involves working with an object that has the following structure: var data = [ { "inputDate":"2017-11-25T00:00:00.000Z", "billingCycle":6, "total":1 },{ "inputDate":"2017-11-28T00:00:00.000Z", "bi ...

javascriptnode.jslodash

Repeating the process of running a function multiple times

export default function MyQuestions() { const router = useRouter(); const [auth, setAuth] = useState(false); const checkAuth = async () => { const loggedInUsername = await getUsername(); if (router.query.username === loggedInUsername) re ...

javascriptreactjsfunctionnext.js

Invoke the REST API and save the compressed file onto the local machine

This is the code snippet I currently have: jQuery.ajax({ type: "GET", url: "http://localhost:8081/myservicethatcontainsazipfile", contentType:'application/zip', success: function (response) { console.log("Successful ...

javascriptjqueryajax

What is the resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

When using import {Injectable} from '@angular/core';, does the module attribute in package.json point to a file that exports injectable? Also, for the format @angular/core/testing, is there a testing folder within @angular/core that contains anot ...

javascriptangularnpm

Can someone assist me with navigating through my SQL database?

Struggling with a script that searches multiple fields in the same table, I need it to return results even if one or three parameters are left blank. My attempts using PHP and MySql have been fruitless so far, which is why I am reaching out to the experts ...

javascriptphpjquerymysql

Tips for positioning an inline label and input field in an Angular application using CSS and HTML: How to align the label to the left and the input

I'm currently developing an Angular form with multiple label-input field combinations. I have managed to style the labels and input fields with inline block so that they appear on the same row. However, I am facing a challenge in aligning the label to ...

htmlcssangular

Sending JSON data from an iOS app to a Flask backend

Within my Flask Python web application, I store certain parameters in SessionStorage to later send back to Flask and save this data as a text file. Interestingly, the process functions perfectly on PCs and Android devices but encounters issues on iOS devi ...

javascriptpythoniosjsonflask

How to set DIVS to be hidden when the page first loads

I am currently working on a project where I need to use JavaScript to hide certain <div> elements when the page loads. I have also included jQuery in my code. Below is what I have tried so far: $(document).ready(function() { hide(); function hid ...

javascriptjqueryhtml

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml