How to Remove Focus Border (outline) Around Text/Input Boxes ?

How to change the TextBox Border Style in C#?

JavaScript Program to Print Odd Numbers in a Linked List

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

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:

Tags:

#CSS-Questions #CSS #Web Technologies

How to change the TextBox Border Style in C#?

JavaScript Program to Print Odd Numbers in a Linked List