Why Does My Custom Button Have a Blue Border in Chrome, and How Can I Remove It While Maintaining Accessibility?

How to Remove the Blue Border from Custom-Styled Buttons in Chrome

For websites with a custom design, developers often opt for styling the element through Cascading Style Sheets (CSS). However, Chrome users may encounter an issue where a blue border appears around the button when clicked.

Redefining the Focus State

The problematic blue border is the browser's default focus state. To remove it, focus state properties like outline can be modified:

button:focus {
  outline: 0;
}

Copy after login

By setting the outline property to 0, the focus state border is effectively disabled.

Removing Accessibility Regression Warning

It's important to note that removing the focus state by setting outline: 0 may hinder accessibility for users who rely on visual cues like the focus border.

For better accessibility, the following CSS is recommended:

button:focus {
  outline: none;
}

Copy after login

This modification removes the default outline style and preserves accessibility.

Example

In the provided CSS, the button:focus rule has been added:

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

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

Copy after login

This ensures that the blue border is removed in Chrome while maintaining proper accessibility.

The above is the detailed content of Why Does My Custom Button Have a Blue Border in Chrome, and How Can I Remove It While Maintaining Accessibility?. For more information, please follow other related articles on the PHP Chinese website!