What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to:

https://i.stack.imgur.com/ajr2y.gif

I attempted the following solution:

* {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
};

button, 
button:active, 
button:focus {
  outline: none;
};

However, this code didn't work in removing the unwanted blue-box-fill as it's not a typical focus border or outline.

css

Answer №1

If you want to change the tap highlight color, check out -webkit-tap-highlight-color

-webkit-tap-highlight-color: transparent;

Answer №2

Are you experiencing this issue on iOS?

Adding the following CSS rule should stop the blue box from showing:

-webkit-tap-highlight-color: transparent;

Answer №3

Here is a style example for buttons:

button {
  margin: 10px;
  padding: 10px;
  height: 50px;
  width: 50px;
  background: #0095ff;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  color: white;
}

#btn2 {
  outline: none;  
}
<button id="btn1">Click</button>
<button id="btn2">Click</button>

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

Is there a Wordpress floating bar similar to the one seen on 9gag?

After browsing through some posts on stackoverflow, I noticed that my website is not responding as expected. You can check out my site here: To troubleshoot, you can examine the source code and utilize Firebug to inspect the css and javascript being used ...

javascriptjqueryhtmlcsswordpress

Sorting rows by words and numbers in JavaScript explained

Hello, I'm a beginner and I need help sorting the table rows in the following table. I also want to attach an onclick listener to the header after it is displayed. ID Name Inventory Volume 1 Rachel Data is not enough 2 Ross 100 3 Monica 1 ...

javascripthtmlcsssorting

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

htmlcss

Enhancing Page Content Dynamism: Making Elements Static

I have a div element that I want to align on the right side of the screen, but the problem is that it doesn't adjust its position as the content dynamically expands and exceeds the width of the page. Despite conducting extensive research, I haven&apos ...

javascriptjqueryhtmlcss

Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

I have a text input box appearing on the left side with a button positioned next to it on the right. For certain pages, I want to display a checkbox next to the input box and move the button below it. Is there a way to achieve this using CSS flexbox or a ...

javascripthtmljquerycss

Flickering Button Displayed After Fade-In Animation

After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening. I've tried vario ...

csswordpresssafariwebkit

Activate Click, or Pop-up Box

I've been attempting to log in to the Udemy site using JavaScript, but I'm having trouble triggering the click action on the "log in" link. Unfortunately, the .click() method doesn't seem to be working when I try to select the element. The l ...

javascriptcsshtml

Tips for displaying a pop-up when pressing a link:

I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code: HTML: <!DOCTYPE html> <html> <head> ...

htmlcsspopup

Issues arise when dealing with a CSS and HTML accordion

I decided to create a CSS and HTML collapsing menu system, also known as an accordion. I found a tutorial on how to do it here. However, I had to make some modifications because I wanted to include images in the 'sections' later on. Instead of us ...

htmlcssaccordion

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

phphtmlcss

Swapping out LinkButtons using jQuery

[EXPLANATION] (apologies for the length) In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new ...

jqueryasp.netcss

Using Java Swing to apply HTML styling to text strokes

I have come across this code snippet for a Java swing JLabel: "<html>\n" + "<head><style>\n" + "p { color: white;\n" + " text-shadow:\n" + " -1px -1px 0 #000,\n" + " 1px -1px 0 #000,\n" + " -1 ...

javacssswing

Is there a way to customize the CSS for a single blog post and add a 5-star rating system without affecting other posts?

After launching my blog on Google's Blogger, I wanted to add a unique touch by incorporating a static 5-star rating system in my Books I Read Section. I thought about using CSS to customize each book post and display anywhere from 1 to 5 stars for vis ...

javascriptjqueryhtmlcssrating-system

How can I transfer a particular data value from a div to JavaScript within Laravel 5.0?

Displaying separate square divs based on integers retrieved from the database. This is the front-end view. I want to pass the room ID (code) to a JavaScript function when clicking on these div elements. https://i.stack.imgur.com/aIYTr.png Below is my cur ...

javascriptphpjqueryhtmlcss

Enhance the responsiveness of full-screen pop-ups

My current project involves creating a full-screen pop-up for a specific application. /* Custom Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; ...

htmlcssresponsive-design

How can I place a DOM element without relying on style properties?

Before diving in, let me provide some context. I am currently developing a visual element that operates similar to a spreadsheet. It features scrollable content areas in both directions, with axis indicators on the left and top that remain visible at all t ...

javascriptcssspreadsheet