How to Remove the Unwanted Border from Input Buttons in CSS?

Eliminating the Unwanted Border from Input Buttons

When interacting with websites, users often encounter input buttons, which serve as interactive elements for submitting data or initiating an action. However, these buttons may occasionally display an unsightly border when clicked or focused upon.

In CSS, the outline property is responsible for creating the visible border around the button. By default, elements in a web document receive a dotted outline when focused. In the case of input buttons, this outline can be particularly distracting.

Solution: Removing the Outline

To eliminate the unwanted border, you can harness the power of the outline property by setting its value to none. Here's how:

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
  outline: none;
}

Example

Applying these styles to your HTML input button will remove the outline upon click or focus, leaving you with a clean and seamless user experience:

<input type="button" value="Example Button">

Note for Chrome Users

In Chrome, the removal of the outline border using the outline: none; property may not be sufficient. In such cases, an additional line of CSS is required:

-webkit-appearance: none;

Apply both the outline: none; and -webkit appearance: none; properties to your CSS to ensure that the border does not appear in Chrome browsers.

The above is the detailed content of How to Remove the Unwanted Border from Input Buttons in CSS?. For more information, please follow other related articles on the PHP Chinese website!