Q:

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

mhmadesk
Save to bookmark
|
2022-05-17
|
  366 
Very Easy
0

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

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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>Removing Blue Outline from Inputs 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.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now