How to Remove Focus Border (outline) Around Text/Input Boxes ?
Last Updated :
29 Feb, 2024
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:
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
Making CSS outline-color property transparent and adding custom border
In this approach, we will make CSS outline-color equals transparent on `input:focus` so that it can remove the focus border and add a custom border on `input:focus`
Syntax
input:focus {
outline-color: transparent;
border: 2px solid skyblue;
}
Example: Here is an example demonstration of the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
body {
padding: 40px;
}
.flex {
display: flex;
gap: 12px;
}
.btn-red {
background-color: rgb(20, 170, 220);
color: white;
border: none;
padding: 0px 12px;
border-radius: 6px;
}
input {
padding: 12px;
}
input:focus {
outline-color: transparent;
border: 2px solid rgb(0, 174, 255);
}
</style>
<title>Document</title>
</head>
<body>
<h4>
Removed focus border using {
outline-color: transparent;
border: 2px solid red;
}
</h4>
<div class="flex">
<input type="text" class="">
<button class="btn-red">Submit</button>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...