Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to remove outline around text input boxes in chrome using CSS

Topic: HTML / CSSPrev|Next

Answer: Use CSS outline property

In Google Chrome browser form controls like <input>, <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none.

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Input Highlighting in Chrome with CSS</title>
<style>
    input:focus, textarea:focus, select:focus{
        outline: none;
    }
</style>
</head>
<body>
    <form>
        <input type="text">
        <hr>
        <textarea></textarea>
        <hr>
        <select>
            <option>Select</option>
        </select>
    </form>
</body>
</html>

However, it is recommended to apply some alternative style to indicate that the form control has focus. It will make your website more accessible and user friendly.


Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates