Remove Blue Border from CSS Custom-Styled Button in Chrome

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 do I remove blue selected outline on buttons?

That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!

Use this to remove this effect:

button {
outline: none; // this one
}

CSS remove hazy blue border from link in Chrome, prefer Firefox method

This effect is called the focus ring, and applies to any element that is given focus, either through a mouse click, a screen tap, or using the tab key on a keyboard.

This can be switched off in browsers by using the following:

a:focus, a:active {
outline: none;
-moz-outline-style: none;
}

Be aware that switching this off makes it harder for users with accessibility needs to be able to make their way through your page. You can therefore use this styling to switch from the browser's default behaviour, to something more in keeping with the look and feel of your site, while embracing an audience with differing needs of accessibility. For example:

a:focus, a:active {
outline: 4px dotted white;
-moz-outline-style: 4px dotted white;
}

How do I remove the blue border that appears when clicking on a uib-accordion-heading?

Solution

:focus {outline:0 !important;}

This code all focus border remove.

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

cant remove blue highlight chrome on focus

Add this CSS

.help-center .hc-search-form:focus-within{
border: 0 none;
box-shadow: none;
}


Related Topics



Leave a reply



Submit