Webkit-tap-highlight-color won't change on focus

Issue

I'm building a form using Svelte & Skeleton UI.

The -webkit-tap-highlight-color gets set to rgba(128, 128, 128, 0.5); by the theme.

This gives an unwanted effect on some buttons causing the border color to change when an items is pressed or in focus (e.g tabbing to the element).

Current behaviour / Expected border behaviour

I have tried setting the focus: and focus-visible: psuedo classes to border-color-* and tried manually overriding the -webkit-tap-highlight-color using the !important property but nothing wants to override the default behaviour.

The code

<footer class="modal-footer">
    <button class="btn border rounded-md border-red-600 bg-red-300/10 hover:bg-red-500/30 focus:border-red-500 focus-visible:border-red-500" style="-webkit-tap-highlight-color: transparent !important;" on:click={modalStore.close}>Cancel</button>
    <button type="submit" class="btn border rounded-md border-success-600 bg-success-300/10 hover:bg-success-500/30" style="-webkit-tap-highlight-color: transparent" on:click={onFormSubmit}>Send message</button>
</footer>

What other CSS classes can interfere with this and what should I look out for?

Edit: Setting focus:ring-0 also does not get rid of the white border.

Edit 2: It stays this way across multiple browsers (chrome, firefox, edge) & the css -webkit-tap-highlight-color (with the important property) does get applied (I see it in the inspector as element.style) but it doesn't seem to do anything

Solution

The white (and black, though you cannot necessary see the black portion in your screenshots) is the focus outline applied by browsers. You can override this using the outline-* CSS properties.

With Tailwind, it has separate sets of utility classes to set outline-width, outline-color, outline-style and outline-offset.

For example, to change the outline to blue, we can use the focus:outline-blue-500 class:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<footer class="modal-footer">
    <button class="btn border rounded-md border-red-600 bg-red-300/10 hover:bg-red-500/30 focus:border-red-500 focus-visible:border-red-500 focus:outline-blue-500" style="-webkit-tap-highlight-color: transparent !important;" on:click={modalStore.close}>Cancel</button>
    <button type="submit" class="btn border rounded-md border-success-600 bg-success-300/10 hover:bg-success-500/30 focus:outline-blue-500" style="-webkit-tap-highlight-color: transparent" on:click={onFormSubmit}>Send message</button>
</footer>

Answered By - Wongjn