Android Browser - Remove Outline Border When Anchor Is Focused

Android browser - remove outline border when anchor is focused

Set the CSS property -webkit-tap-highlight-color as follows:

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

Note: setting the color in other ways usually fails because of the way webkit renders the highlight. Depends on version/variant according to my experience.

Remove blue border from css custom-styled button in Chrome

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.change {background-color: #F88F00;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.change:hover {cursor: pointer;background-color: #F89900;}
button:active {outline: none;border: none;}
button:focus {outline:0;}

<button class="launch">Launch with these ads</button> <button class="change">Change</button>

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

How to remove visual feedback frame on Samsung Galaxy browser

I had a (clickable) canvas element, surrounded by a fully transparent div. The dark orange outline was (surprisingly) generated by a div (not canvas). Even more surprising - the size of the outline was much bigger than the size of div (no other elements - checked). So, I've decided to switch the outline off and this (http://stackoverflow.com/questions/7398763/android-browser-remove-outline-border-when-anchor-is-focused) answer solved the problem.

Focus outline not shown when set on anchor programmatically

I encountered the same issue, and best I can tell this is a browser bug.
It appears that until Firefox has rendered a focus outline that is not programmatically triggered, it will fail to display the outline for programmatically triggered focus. Once an outline has been displayed, focus outlines will display for programmatically triggered focus as well.

Note that this is not limited to anchor elements. In my case it is occurring on <div tabindex="0">.

I did find one workaround: specify explicit styles for the focus outline:

.programmatically-focused:focus {
    outline: 1px dotted;
}

To avoid clobbering default focus ring styles in other browsers, you may want to limit the workaround to Firefox:

@-moz-document url-prefix() {
    .programmatically-focused:focus {
        outline: 1px dotted;
    }
}

This style seems to match FF's built-in focus outline in my environment (FF 43.0.1 on Win7). Based on this page, it appears that FF Mac uses the same style. It uses the current text color for the outline.

Here's an update to your fiddle with the workaround in action: http://jsfiddle.net/4xkh9y1o/4/

How to remove focus around buttons on click

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

How to remove the blue highlight of button on mobile?

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally:

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Hope this helps :)

You can find the documentation here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

---

Related Topics