Usually, I don't pay much attention to it. However, there is an image carousel on my website and when I click quickly on the next and previous divs, they get highlighted in Chrome.
I attempted using outline:none but to no avail. Are there any other solutions available?
If you're using Chrome on Android, there is a handy CSS property called -webkit-tap-highlight-color that can be utilized:
-webkit-tap-highlight-color is an unconventional CSS property designed to determine the color of the highlight effect that appears when a link is tapped. This highlighting plays a crucial role in confirming to the user that their tap has been successfully registered and also helps in identifying the specific element being tapped.
To completely eliminate the highlighting effect, simply set the value to transparent:
-webkit-tap-highlight-color: transparent;
However, it's important to note that removing the highlighting may impact accessibility - for more information, visit outlinenone.com
To achieve this, you can utilize pure CSS. Below is a breakdown for achieving multi-browser compatibility, with the first line covering Chrome and the final :focus part. More details provided below.
.noSelect {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.noSelect:focus {
outline: none !important;
}
To apply this style, simply add the class="noSelect" attribute to the desired element. I recommend trying out this CSS solution instead of resorting to JavaScript as some have suggested.
For Android/Safari mobile/Edge
-webkit-tap-highlight-color: transparent;UPDATE: For newer versions of Chrome...
A commenter pointed out that
:focus { outline: none !important;}After testing multiple CSS solutions, none seemed to work on my Chrome version 60.
Eventually, I discovered that Chrome was applying the blue highlight using the outline property. To resolve this issue, I implemented the following CSS code:
:focus {
outline: none !important;
}
Occasionally, despite disabling user-select and touch-callout, using cursor: pointer; can still result in the same issue. In that case, simply switch to cursor: default; and the problem should be fixed.
For eliminating the blue overlay on mobile devices, you have several options available:
-webkit-tap-highlight-color: transparent; /* make it transparent using keyword */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* transparent with rgba */
-webkit-tap-highlight-color: hsla(0,0,0,0); /* transparent with hsla */
-webkit-tap-highlight-color: #00000000; /* transparent with hex and alpha */
-webkit-tap-highlight-color: #0000; /* transparent with short hex and alpha */
Unlike some other properties, you cannot employ
-webkit-tap-highlight-color: none; /* using 'none' keyword */
In DevTools, this may appear as an 'invalid property value' or something similar.
To get rid of the blue/black/orange outline when an element is focused, use the following code:
:focus {
outline: none; /* no outline - compatible with most browsers */
box-shadow: none; /* no box shadow - for specific browsers or in case of Bootstrap usage */
}
I removed the box-shadow because at times Bootsrap (and certain browsers) automatically add it to focused elements, hence removing it using this method.
However, users navigating with a keyboard might face confusion since they rely on this outline for navigation. Therefore, consider replacing it instead with
:focus {
outline: 100px dotted #f0f; /* pink dashed outline of 100px thickness */
}
You can also direct taps on mobile devices by utilizing :hover or :active, potentially assisting in providing guidance during interactions, although it could be perplexing.
Here's the complete code snippet:
element {
-webkit-tap-highlight-color: transparent; /* remove tap highlight */
}
element:focus {
outline: none; /* remove outline */
box-shadow: none; /* remove box shadow */
}
Additional insights:
-webkit-tap-highlight-color, opt for a semi-transparent color to ensure visibility of underlying elements upon tap.-webkit-tap-highlight-color lacks comprehensive browser support and isn't standardized. While still usable, caution is advised!I encountered a similar problem with the
<input type="range" />-webkit-tap-highlight-color: transparent;
input[type="range"]{
-webkit-tap-highlight-color: transparent;
} <input type="range" id="volume" name="demo"
min="0" max="11">
<label for="volume">Demo</label>To remove the selection from specific elements, consider setting up a handler for the select event and clearing the selection within that handler.
For more information, check out this resource:
How to Clear Selection in JavaScript
This link provides an example on how to clear a selection, which you can customize to suit your specific element.
This is the solution that has proven most effective for me:
.noSelect:hover {
background-color: white;
}
I am trying to incorporate Selenium into my Heroku app. To do this, I have added the necessary buildpacks. https://i.sstatic.net/VQZNv.png Below is the Python code that utilizes Selenium, Chrome, and Chromedriver. from selenium import webdriver # from s ...
I am struggling to center my text vertically in this scenario. Here is the structure I have: <section id='container'> <div id='title'> <h1>Title here.</h1> </div> </section> This ...
My goal is to have a modal display a date/time set by another party when opened by the user. However, I also want to provide an option for the user to propose a new time in the footer so that they can request a different meeting time from the other party ( ...
How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...
I am currently working on implementing a menu item behaviour in the header similar to the one found at: . On this webpage, there is a bar that slides back and forth when hovering over elements. However, I am unable to add another element to my header, so I ...
I found a helpful answer on Stack Overflow that I'm currently following, and it's working perfectly for me. However, I am facing an issue where I need to position the boxes in different parts of the document, causing the animation to break. You ...
I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this p ...
I have made some progress on my project so far: http://jsfiddle.net/BgEtE/ My goal is to achieve a design similar to this: I am in need of a progress bar like the one displayed on that site, as well as the ability to show the days remaining. Additionally ...
I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...
I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...
What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...
Is there a way to create a border with some space around it? ...
When I use window.history.pushState("string", "title", "/new-url"); to modify the URL without reloading the page, the content does not show up when accessing the new URL in a new tab. Instead, it throws an error Cannot GET / ...
I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...
I have a dropdown menu with checkboxes that can be selected using SumoSelect. Here is the markup for the dropdown menu: <select multiple="multiple" name="somename" id="uq" class="select"> <option value="volvo">Volvo</option> <o ...
Why do I have to add a touch event to my element in order for it to trigger hover styles? Is this typical behavior? It seems a bit unconventional. This is the code I need to include to make :hover work; without it, no hover style is applied. Apologies f ...
Currently, I am working on Javascript and dealing with time in milliseconds. I have been successful in displaying the time in GMT format but now I need to convert it to PST timezone. The challenge is that the input time is in milliseconds (e.g. 16716735502 ...
I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome. Currently, the website looks like this: https://i.stack.imgur.com/ItOcp.jpg However, I e ...
<p class="butonat"> <a href="#"><span class="color1">Explore More </span></a> I attempted the given styling but it did not produce the desired result: Styling (provided in comment post by original poster): .butonat ...
I've been working on a small project and I added a button with hover and CSS effects. However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied. I attempted to troubleshoot if ...