Apache Cordova: Clicking on the Div turns it a shade of blue

I am currently developing an application using Apache-Cordova. I have two divs that look like this (and the small yellow one):

https://i.sstatic.net/o8v6I.png

Everything is working fine so far, but when I add click/mouse event handlers to my green divs, they turn blueish when touched (and the click doesn't trigger if held for too long).

<p id="GreenDiv" onclick="GreenDiv_OnClick()">

https://i.sstatic.net/ArEbz.png

I have tried CSS solutions like these, but none of them work:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none; 
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Does anyone know how to disable that highlighting effect?

htmlcsscordovaapache-cordova

Answer №1

After an extensive search, I finally came across this crucial snippet of CSS:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

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

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

javascriptcssangulartypescriptasynchronous

"Ensuring content remains within the confines of a modal box

My goal is to integrate a month calendar pop-up within my app using a material UI Modal where users can choose the day. However, I am encountering an issue with the size of the modal not adapting to the calendar properly. How can I resolve this? (To open t ...

cssreactjsmaterial-uimodal-dialog

Redirecting HTML files to JavaScript and CSS files

Below is the structure I typically use for PHP MVC: -Resources --/my.css --/my.js -Project --/.htaccess --/index.php --/Other Files & Folders Here is how my htaccess file is configured: Options -Indexes #AddHa ...

phpcssapache.htaccess

The visible overflow-x property is failing to display the excess content within the unordered list

Imagine having a complex bootstrap dropdown menu with over 100 li items. Each time you hover over an li, a new dropdown opens next to it. The problem arises when trying to make the list scrollable by setting max-height:300px; overflow-y:scroll; overflow-x ...

htmlcsstwitter-bootstrap

Utilizing Cordova's Ionic framework to access geolocation services in the background

How can I continuously track the user's location in my application without it resetting every time I reload the code? Here is what I have tried: app.controller('geoCtrl', function($scope, $timeout, $cordovaBackgroundGeolocation, $ionicPlatf ...

angularjscordovaservicelocationionic-framework

Is there a method to update the status of a Jquery UI Mobile navbar using Javascript?

I have created a navigation bar using the Jquery mobile UI 1.01 framework; <div id="footer" data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" onClick="toggle_units();" clas ...

javascripthtmljquery-uijquery-mobile

When images in Ionic overlap with the side menu bar

Currently, I am in the process of developing an Android app using the IONIC framework. Within this project, I have created three divisions that contain images with shadows applied to them. However, I am encountering an issue where the side menu bar is over ...

javascripthtmlcssangularjsionic-framework

Can CSS be used to show text at a descent rather than baseline?

Is there a correct method to position text at the descent height of a line rather than its baseline? For more information, please visit: http://en.wikipedia.org/wiki/Baseline_(typography) and http://jsfiddle.net/YPPnU/ The objective is to align the bo ...

htmlcsstypography

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

Craft a Unique Responsive Background Design

I'm eager to create a background like this, but I'm struggling to figure out the best approach. My attempt with transform: skewY(-6deg) ended up skewing my entire page instead of just the background. Could someone please assist me in finding th ...

htmlcssbackground

Is there a way to customize the color of a React component from a different source?

I am currently utilizing a React component library called vertical-timeline-component-react. <Fragment> <Timeline> <Content> <ContentYear startMonth="12" monthType="t ...

javascriptcssreactjs

Mentioning VARs found on additional pages

I'm currently designing a website. At the moment, I have set up the site to prompt users for their name on the landing page and store it in a string variable. var username = ""; Once users enter their name and click "Enter Site," they are directed ...

javascriptjqueryhtml

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

I am looking to create a grid on the screen of a web browser or mobile device, with each grid item containing just one letter. It's similar to a crossword puzzle, but taking up most of the screen. I've tried using divs for this purpose, but it se ...

javascripthtmlcssweb

Struggling to figure out the best way to showcase Python code within an HTML document

Hello there, I am in the process of developing a website to showcase past year questions from the competitive exam JEE in India. To gather the questions and respective options, I utilized bs4 and requests for web scraping from ExamSide, a website that hous ...

pythonhtmlflaskweb-scraping

Selector in CSS targeted by using target selector

When you click on the anchor tag "Click me," is there a way to use only CSS to display the p tag with the text "This is my answer"? I am aware that placing the p tag after the anchor tag is a solution, but I am curious if there is a method to achieve this ...

javascriptjqueryhtmlcss

Language translation API specifically designed to convert text content excluding any HTML formatting

I have a dilemma with translating text content in an HTML file into multiple languages based on user input. To accomplish this, I am utilizing the Microsoft Translator AJAX interface. The structure of my HTML file looks something like this; <h1>< ...

javascripthtmlajaxgoogle-translatemicrosoft-translator

Styling divs to have equal height using CSS borders

My current technique involves using negative margins to create the illusion of equal heights for my horizontal divs. However, adding borders to these divs has created an issue where there is no bottom border due to the combination of padding and negative m ...

htmlcss

Customize the switch option in your data tables

Currently, I am attempting to integrate a custom switch feature into my Datatables setup. To achieve this, I have implemented the following function that includes an Action column in Datatables: function getdata(Request $request) { if(request()->aj ...

htmljqueryajaxlaravel

Is it possible to selectively add Bootstrap classes to certain sections of a pre-existing website without changing the current styling in place?

What is the best way to customize Bootstrap classes for specific blocks or modify default classes, like changing .row to .row_2, without impacting other elements styled with different Bootstrap classes? ...

javascripthtmlcssbootstrap-5

Transfer a GET parameter from the URL to a .js file, then pass it from the .js file to a

Hey there, I'm currently using a JavaScript file to populate my HTML page with dynamic data. The JS file makes a call to a PHP file, which then fetches information from my SQL database and echoes it as json_encode to populate the HTML page. The issue ...

phpjavascriptjqueryhtmlajax