We often encounter the problem that the input has nothing in its properties, but when clicked or hovered, a blue frame appears.
Why does it happen?
Every browser has default CSS properties to display the active field. In addition, the browser uses the outline property.
What to do to remove this frame?
To remove the stroke from the input, you need to apply the property:
<pre><code class="lang-css">input {
 outline: none;
}
</code></pre>
To remove the outline when focusing on the <code>input</code>, use these properties:
<pre><code class="lang-css">input:focus {
 outline: none;
}
</code></pre>
If you want to draw a stroke from <code>input</code> as well as other elements such as <code>select</code>, <code>a</code>, <code>button</code> in all possible states, you can apply this property:
<pre><code class="lang-css">:active, :hover, :focus {
 outline: none;
 outline-offset: none;
}
</code></pre>

We often encounter the problem that the input has nothing in its properties, but when clicked or hovered, a blue frame appears.

Why does it happen?

Every browser has default CSS properties to display the active field. In addition, the browser uses the outline property.

What to do to remove this frame?

To remove the stroke from the input, you need to apply the property:

```css
input {
    outline: none;
}
```

To remove the outline when focusing on the `input`, use these properties:

```css
input:focus {
    outline: none;
}
```

If you want to draw a stroke from `input` as well as other elements such as `select`, `a`, `button` in all possible states, you can apply this property:

```css
:active, :hover, :focus {
    outline: none;
    outline-offset: none;
}
```

How to remove the outline from input