Making CSS outline property equal to none
In this approach, we use the CSS outline property to make it outline equals none on `input:focus`
Syntax
input:focus {
outline: none;
}
Example: Here is an example demonstration of removing the outline borders using the CSS outline property.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Learn CSS</title> <style> body { padding: 40px; } .flex { display: flex; gap: 12px; } .btn-red { background-color: crimson; color: white; border: none; padding: 0px 12px; border-radius: 6px; } input { padding: 12px; } input:focus { outline: none; } </style></head><body> <h4>Removed Focus Border on input:focus {outline: none;}</h4> <div class="flex"> <input type="text" class=""> <button class="btn-red">Submit</button> </div></body></html> |
Output:
output approach 1
How to Remove Focus Border (outline) Around Text/Input Boxes ?
Focus borders or outlines around text/input boxes are added by the browsers most of the time to mark indications to the element that is currently in focus. This feature provides accessibility, however, on the flip side, it might clash with certain design aesthetics.
Below are the possible approaches:
Table of Content
- Making CSS outline property equal to none
- Making CSS outline-color property transparent and adding custom border