How to remove focus border (outline) around text/input boxes? (Chrome)

on

 

To remove the focus border (outline) around text and input boxes in Google Chrome, you can use CSS to style the :focus pseudo-class for those elements. You can set the outline property to none or specify a different style to customize the appearance. Here's an example:

html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Remove the default focus outline for input and textarea */
        input:focus, textarea:focus {
            outline: none;
        }

        /* Add a custom focus style (optional) */
        input.custom-focus, textarea.custom-focus {
            border: 2px solid #007bff; /* Add your preferred color or style */
        }
    </style>
</head>
<body>
    <label for="input1">Input 1:</label>
    <input type="text" id="input1">
    
    <br>
    
    <label for="input2">Input 2:</label>
    <input type="text" id="input2" class="custom-focus"> <!-- Apply custom focus style -->

    <br>

    <label for="textarea1">Textarea 1:</label>
    <textarea id="textarea1"></textarea>

    <br>

    <label for="textarea2">Textarea 2:</label>
    <textarea id="textarea2" class="custom-focus"></textarea> <!-- Apply custom focus style -->
</body>
</html>

In this example:

  1. We define two styles: one for removing the default focus outline and another for adding a custom focus style.

  2. The input:focus, textarea:focus selector is used to remove the default focus outline for all input and textarea elements.

  3. If you want to add a custom focus style, you can apply a specific class like custom-focus to the input or textarea element. In this example, we use the border property to create a custom border style when the element is in focus. You can customize this style further to match your design preferences.

By setting outline: none;, you remove the default focus border. However, it's important to note that removing the focus outline can affect accessibility, so consider providing an alternative indicator or styling for focus if you choose to remove it.

Comments

Post a Comment