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
Reduce Spacing Between Bootstrap Horizontal Form Controls
How to Include CSS Files Using Node, Express, and Ejs
Override Body Style for Content in an Iframe
Want My Button to Remain Dark When Clicked
Safari: Media Query Not Firing At the Expected Width
How to Make a Child Div'S Width Wider Than the Parent Div Using Css
Child Inside Parent With Min-Height: 100% Not Inheriting Height
How to Make a Floated Div 100% Height of Its Parent
Canvas Has White Space At the Bottom and Scrolls Too Far
Ipad Safari Scrolling Causes HTML Elements to Disappear and Reappear With a Delay
Browsers Scrollbar Is Under My Fixed Div
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
Header and Footer in Each Page in Print Mode With CSS