CODEWITHSUNDEEP
css
Zeddrix Fabian
Zeddrix Fabian

Reputation: 2566

How to remove blue-box-fill when clicking the buttons?

Here's a gif that I've screen recorded on my device where you can see the blue-box-fill that I'm talking about:

enter image description here

I've tried doing this:

* {
  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;
};

But it doesn't do the trick of getting rid of that blue-box-fill, since it's not really a focus border or outline.

Upvotes: 3

Views: 9815

Answers (3)

cam
cam

Reputation: 3626

The property you're looking for is tap-highlight-color

-webkit-tap-highlight-color: transparent;

Upvotes: 19

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

I think you want like this ..

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>

Upvotes: 0

doctypecode
doctypecode

Reputation: 101

I'm guessing this is happening on iOS?

This should prevent the blue box from appearing:

-webkit-tap-highlight-color: transparent;

Upvotes: 3

Related Questions