Troubleshooting problem with SVG icons not highlighting correctly when clicked on mobile devices

I recently incorporated SVG icons into my website. However, when I tap on them using a mobile browser, the browser highlights the icon. Is there a way to disable this highlighting effect?

Example: highlight

Code:

<div class="ictg-before">
<svg fill="#262626" height="72" viewBox="0 0 24 24" width="72" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"></path>
    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"></path>
</svg></div>
htmlcsssvg

Answer №1

First and foremost, the issue at hand does not lie with SVG itself, but rather with the general behavior of clickable ("tapable") elements on your webpage. Whether it's a link or simply an element that changes when clicked, it will receive a highlight to indicate its usability.

To get rid of this highlight (or modify it to your preference), I typically implement the solution suggested by CSS Tricks:

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

You can find more information about this solution on CSS Tricks

It's important to note that this is not a standard solution: MDN

Keep in mind that using cursor: pointer may interfere with this solution!

I recommend exploring adjustments to :active and :focus selectors to ensure broader and more reliable support if needed.

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

Unusual shift in behavior - <input> on Windows 8.1

Our application is a unique HTML5/WinJS Google Talk app tailored for Windows 8 users. Within our app, we utilize a textarea for chat input with a predefined maximum height. We have coded the height to automatically adjust to the maximum limit once reached. ...

javascripthtmlcsswindows-8windows-8.1

Using JQuery, eliminate the transition effect from a child CSS class

I am facing an issue with transitioning an ID that has a child class. My goal is to transition the ID only, without affecting the class within it. Despite going through CSS and jQuery documentation, I have been unable to achieve this. The transitions are c ...

javascriptjquerycss

modifying the appearance of the play button through a JavaScript event without directly altering it

I am currently working on building a music player from scratch using HTML, CSS, and JavaScript only. To store the list of songs, I have created an array named "songs" with details such as song name, file path, and cover image path. let songs = [ {songNa ...

javascripthtmlcssevent-handlingaddeventlistener

When I click on my Material UI avatar image, it seems to override the button I had in

Every time I try to create a basic category filter with images, I encounter a frustrating bug. After examining the console log, it seems that when I click on the button, my image is being clicked and behaving like an image. However, when I click around the ...

htmluser-interfacematerial-uinext.js

Most effective method for displaying 100 images on a single page?

I have a webpage on my site that displays 100 images, but loading them one at a time makes it look unattractive. Is there a way to make it more elegant and visually appealing? ...

javascripthtmlcss

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

Achieving Inline Icons with Text in Bootstrap 5 Button

Looking for some assistance <div class="col-auto mt-lg-0 mt-2"> <a href="#" style="--bs-btn-font-size: .95rem;" class="btn btn-outline-secondary"> <i class="bi bi-download"></i&g ...

htmlbootstrap-5

Arrange the array in chronological order based on the month and year

I'm looking for assistance with sorting an array by month and year to display on a chart in the correct order. Array1: ['Mar19','Apr18','Jun18','Jul18','May18','Jan19'....]; Desired Output: ...

javascripthtmlarrayssorting

Creating visually appealing definition lists

My goal is to customize the appearance of a shopping cart that is created by a rigid system where I cannot modify the html code. The categories list is generated in the following manner: <dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1&ap ...

htmlcssstyling

What is the correct way to embed a script tag within a block of JavaScript code?

I'm currently working on a JavaScript code that needs to be executed inside an iframe. The goal is to insert a script tag within the JavaScript code and then append it to the parent body of the iframe. Below is the snippet of my code attempting to ach ...

javascriptjqueryhtmliframe

Learn how to dynamically update a user's profile picture in the navbar when clicked using Angular

When I have a navbar (see code below) and set *ngIf = "user", I attempt to display the user's avatar in the navbar but only see a placeholder. However, after refreshing the page, the user avatar appears. Therefore, I am curious about how I can refresh ...

jqueryhtmlangularjstwitter-bootstrap

Allowing several text fields to be paired with multiple checkboxes through a unified jQuery function

I have 4 different checkboxes, each one corresponding to a specific text box. I want to enable the disabled textbox when its corresponding checkbox is checked. Currently, I have written a function for each checkbox in the HTML tag itself using onclick="doc ...

javascriptjqueryhtmlcheckboxdisabled-input

Dividing a string into an array and displaying it in a table using Laravel

Retrieving a string from the database and using the explode function to split the values. Below is the code snippet: $data = DoctorRegistration::select('products') ->where('doctorid','=',$doctorid) ->get(); ...

javascripthtmlajaxlaravel

Retrieving the headers from an ajax request

Is there a method to retrieve the complete request headers used in an AJAX call made through jQuery? ...

javascriptjqueryhtmlajaxhttp-headers

What is the best way to position four circles within a square container using CSS?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .circles { height: 150px; width: 150px; background-color: #bbb; border-radius: 50%; displ ...

htmlcss

Including HTML attributes within a PHP script

Currently, I am working on developing a message to be displayed to the user after they have submitted the contact form using PHP. However, I am facing an issue with styling the message as intended, particularly with elements like bold text and line breaks ...

phphtmlcss

Using Regular expressions in JavaScript to eliminate content between two HTML comment tags

I am currently dealing with two HTML comments in this format: <!--Delete--> Blah blah blah blah <!--Delete--> I need to remove these comments, along with any characters and newlines. I am utilizing JavaScript and Grunt for this replacement ta ...

javascripthtmlregexgruntjs

Struggling to Align Banner in Dynamic Layout

I am currently working on centering the banner image as the resolution size decreases, rather than having it pushed to the right. The specific page I am addressing can be found here. My approach involves utilizing a width of 100%. <!-- BEGIN T ...

htmlcssresponsive-design

Unable to conceal element if it is devoid of content

<div id="web-link" class="infoline"> <i class="fa fa-link fa-2x fa-fw coloriconfa"></i> <a href="<?=$data['post']['url']?>" target="_blank"><?=$data[ ...

javascripthtml

What is the process of attaching a CSS class to jQuery variables?

Welcome everyone! I am relatively new to CSS and jQuery. In my project, I'm using different CSS classes based on certain conditions within a loop. if(get_node_details[i]['node_status'] == "ONLINE") { var panel_color = ".panel panel-prim ...

jqueryhtmlcss