How Do I Remove the Annoying Blue Border from Chrome's Custom Buttons?

Getting Rid of the Annoying Blue Border on Chrome's Custom Buttons

When creating custom-styled buttons using CSS, it can be frustrating to encounter an unexpected blue border when clicking on them in Chrome. This outline, which is present despite setting the border to "none," can harm user experience.

One common approach to remove this border is to use "button:active { outline: none }" or "button:focus { outline:none }." However, these may not always work effectively.

A Recommended Solution

Although it's not advisable to eliminate browser borders as it undermines accessibility, here's a solution that should address the issue:

button:focus {
  outline: 0;
}

By setting the outline to "0" on focus, Chrome will no longer display the blue border, leaving your custom buttons as intended.

Demonstration

Check out this updated CSS snippet and the live demonstration at http://jsfiddle.net/u4pXu/ to see the problem solved:

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;
}

The above is the detailed content of How Do I Remove the Annoying Blue Border from Chrome's Custom Buttons?. For more information, please follow other related articles on the PHP Chinese website!