Question 287356 in Html Question posted in
Some basic documentation can be found here.

Html – How to change iOS button style on tap with CSS

I’m trying to get rid of the default button styling while the button is pressed. Inactive it looks like this:

enter image description here

On tap it looks like this:

enter image description here

The border appears slightly after the click and disappears shortly and disappears after a splitsecond. I don’t manage to remove the it however. The code looks like this:

HTML:

<button>This is a button</button>

CSS:

button:active {
  border: none !important;
  background: none !important;
}

Because the border appears slightly after the tap, it would make sense that it isn’t targetable with button:active. What would be the right way to remove all feedback on tap?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the solution, in case anyone has the same problem:

    button {
  -webkit-tap-highlight-color: transparent;
}

    If that doesn't work for you try adding !important like this:

    button {
  -webkit-tap-highlight-color: transparent !important;
}

  2. 0 
    button:focus {
  border: none !important;
  background: none !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search