I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this?
I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this?
This code snippet demonstrates how to disable text selection using CSS. You can view a live example by clicking on this link: http://jsfiddle.net/hGTwu/20/
/* Use these properties for older browser versions */
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* This property is not yet supported in browsers */
-o-user-select: none;
/* Most modern browsers support this property */
user-select: none;
If you need to target IE9 and below, as well as Opera, use the HTML attribute unselectable:
<div unselectable="on">Test Text</div>
It's effective in my case
css
{
-webkit-tap-highlight-color:transparent;
}
My quest to stop div highlighting in Chrome led me to this informative post, but unfortunately none of the solutions provided worked for me.
After extensive online research, I discovered a simple fix that doesn't require complicated CSS. By adding the following CSS code to your webpage, you can prevent div highlighting on both laptops and mobile devices:
div { outline-style:none;}
IMPORTANT NOTE: This method successfully resolved the issue for me in Chrome Version 44.0.2403.155 m. It is also compatible with all major web browsers, as detailed in the following link: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style
Although I'm not an expert in CSS, I believe you can utilize tw16's solution by broadening the scope of elements it affects. For example, this code prevents text from being highlighted across my entire page while preserving other interactive functionalities:
*, *:before, *:after {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
The initial line of code is inspired by Paul Irish (referenced from ).
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
::-moz-selection { background:transparent; }
::selection { background:transparent; }
prevent users from selecting content:
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
make background transparent when element is selected:
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Should an element be interactive, consider styling it as a button.
On my page, there is a section with the following code: <h5 class="text-center" id="findStore" style="width:260px"> <a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId ...
On the home page, I want to change the color scheme so that it is consistent across all pages. The user should be able to choose a color from a list on the home page and have it apply to every page. Currently, the color selection only applies to the home p ...
I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...
Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...
On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disapp ...
Here is the concept I was referring to, you can see it in action by following this link <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-bo ...
Please Note: I've been working on extracting code from a WordPress environment running the Salient theme. As of now, I haven't been able to simplify the issue to its core form. There is a possibility that I might figure it out myself, but I welco ...
After browsing multiple options online, I decided to turn to the expertise of the Stack Overflow community to ask for recommendations based on personal experience. I am specifically in search of a plugin that can substitute a select element with a custo ...
Is there a way to add borders to the image below? I would like to include a border that looks similar to this: text added before and after the entire box How can I achieve a border using css either with before, after, or background? ...
Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...
Here is an example of a carousel provided by w3schools: <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active" ...
I need to create a virtual table to browse through a very large dataset. Is there a way to position the rows (with fixed height) anywhere within the table? The issue I am facing is that the table properties automatically adjust the row height, disregarding ...
I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...
Looking at the image of a blue triangle, I am curious about how to recreate it using CSS. Would using a background image be the best approach, or is there a way to achieve this with CSS transforms? I noticed the triangle is on the left side but not on the ...
Seeking a solution to a unique challenge I've encountered. The website I frequent has found a way to bypass my uBlock extension by using a script that generates random element classes, such as: <div class="lcelqilne1471483619510ttupv"></div& ...
I am interested in customizing Opencart's admin panel to allow for the selection of multiple customer groups when sending emails. However, I am unsure of where and how to make these modifications as I am relatively new to this type of task. ...
Utilizing the popular JQuery plugin Cycle for a slideshow on this site: bybyweb.com/pbm An issue has arisen - everything functions as expected on windows (across all major browsers), BUT on MAC (running lion 10.7.5, tested on one machine so far; unsure of ...
Having trouble adding a tooltip to a glyphicon. The JSFiddle example provided does not work for me as I am using jQuery to create the HTML elements like this: var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash'); How ...
Struggling to find a way to apply the styles for the stepper component without using inline styles. I attempted to replicate Material UI's demo, but encountered an error. The code from Material UI's demo that I want to mimic is shown below: Here ...
I am attempting to utilize a vuetify tab component as my navigation menu in order to create a responsive navbar using vuetify. The goal is to have a normal navbar that functions like usual, but when viewed on a mobile device, it should hide the menu and di ...