Remove blue border from css custom-styled button in Chrome

The Solution to Remove blue border from css custom-styled button in Chrome is


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:

_x000D_
_x000D_
button.launch {_x000D_
background-color: #F9A300;_x000D_
border: none;_x000D_
height: 40px;_x000D_
padding: 5px 15px;_x000D_
color: #ffffff;_x000D_
font-size: 16px;_x000D_
font-weight: 300;_x000D_
margin-top: 10px;_x000D_
margin-right: 10px;_x000D_
}_x000D_
_x000D_
button.launch:hover {_x000D_
cursor: pointer;_x000D_
background-color: #FABD44;_x000D_
}_x000D_
_x000D_
button.launch {_x000D_
background-color: #F9A300;_x000D_
border: none;_x000D_
height: 40px;_x000D_
padding: 5px 15px;_x000D_
color: #ffffff;_x000D_
font-size: 16px;_x000D_
font-weight: 300;_x000D_
margin-top: 10px;_x000D_
margin-right: 10px;_x000D_
}_x000D_
_x000D_
button.launch:hover {_x000D_
cursor: pointer;_x000D_
background-color: #FABD44;_x000D_
}_x000D_
_x000D_
button.change {_x000D_
background-color: #F88F00;_x000D_
border: none;_x000D_
height: 40px;_x000D_
padding: 5px 15px;_x000D_
color: #ffffff;_x000D_
font-size: 16px;_x000D_
font-weight: 300;_x000D_
margin-top: 10px;_x000D_
margin-right: 10px;_x000D_
}_x000D_
_x000D_
button.change:hover {_x000D_
cursor: pointer;_x000D_
background-color: #F89900;_x000D_
}_x000D_
_x000D_
button:active {_x000D_
outline: none;_x000D_
border: none;_x000D_
}_x000D_
_x000D_
button:focus {outline:0;}
_x000D_
<button class="launch">Launch with these ads</button> _x000D_
<button class="change">Change</button>
_x000D_
_x000D_
_x000D_

~ Answered on 2014-02-13 15:15:15


Most Viewed Questions: