Edit or Remove Outline Around Inputs

  • Created:
  • / Author: Jace Farran

By default, most browsers will add a thick outline around any input fields that are currently highlighted. If you’d like to remove that or make changes to it, you can with CSS.

Important Accessibility Note:
It’s generally a good idea for accessibility to include some kind of outline. That way the user knows which field is currently selected. It can be especially difficult for people to see which field is active without a strong visual indicator.

Remove Outline

To remove the outline of all text fields when selected, add this code to an HTML block:

<style>
input[type=text] {
outline: none;
}
</style>

Edit Outline Color

To add a colored outline when the field is selected, you can use the focus state.

In this example, we’re changing the outline to not appear by default, and display as a green (#2cc088) 2px border.

Code below:


<style>
input[type=text]{
outline: none;
}

input[type=text]:focus {
outline: 2px solid #2cc088;
}
</style>
Tagged: