How to remove the orange or blue border (outline) around text/input boxes? It only happens on Chrome to show that the input box is active.

Here’s the input CSS :

[pastacode lang=”css” manual=”input%20%7B%0A%09%09%09%20%20%20%20background-color%3A%20transparent%3B%0A%09%09%09%20%20%20%20border%3A%200px%20solid%3B%0A%09%09%09%20%20%20%20height%3A%2020px%3B%0A%09%09%09%20%20%20%20width%3A%20160px%3B%0A%20%09%09%09%20%20%20color%3A%20%23CCC%3B%0A%09%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it, though:

[pastacode lang=”css” manual=”textarea%3Afocus%2C%20input%3Afocus%7B%0A%09%09%20%09%20%20%20outline%3A%20none%3B%0A%09%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV’s used as modals. To prevent the highlight on those and all other elements as well, you can do:

[pastacode lang=”css” manual=”*%3Afocus%20%7B%0A%20%20%20%20%09%09%09outline%3A%20none%3B%0A%09%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

[pastacode lang=”css” manual=”input%3Afocus%20%7B%0Aoutline%3Anone%3B%0A%7D” message=”Css Code” highlight=”” provider=”manual”/]

This will do. Orange outline won’t show up anymore.

Here is the solution :

[pastacode lang=”css” manual=”.form-control%3Afocus%20%7B%0A%20%20border-color%3A%20inherit%3B%0A%20%20-webkit-box-shadow%3A%20none%3B%0A%20%20box-shadow%3A%20none%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

Use the following syntax to remove the border of text box and remove the highlighted border of browser style.

[pastacode lang=”css” manual=”input%20%7B%0A%20%20%20%20background-color%3Atransparent%3B%0A%20%20%20%20border%3A%200px%20solid%3B%0A%20%20%20%20height%3A30px%3B%0A%20%20%20%20width%3A260px%3B%0A%7D%0Ainput%3Afocus%20%7B%0A%20%20%20%20outline%3Anone%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

Try this code :

[pastacode lang=”css” manual=”%3Cinput%20style%3D%22border%3Anone%22%20%3E%0A” message=”Css Code” highlight=”” provider=”manual”/]

This remove orange frame in chrome from all and any element no matter what and where is it

[pastacode lang=”css” manual=”*%3Afocus%20%7B%0A%09%09%09%09%20%20%20%20outline%3A%20none%3B%0A%09%09%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

[ad type=”banner”]

Common for all tags:

[pastacode lang=”css” manual=”*%3Afocus%20%7B%0A%20%20%20%20outline%3A%20none%3B%0A%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

Specific to some tag, ex: input tag

[pastacode lang=”css” manual=”input%3Afocus%20%7B%0A%09%09%20%20%20outline%3Anone%3B%0A%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

When an input element set to focus in Web Kit browsers like Safari and Chrome, the browser will put a blurry blue/yellow border around it.

This could be confusing and could make your design look different. To disable this we can use the following code.

[pastacode lang=”css” manual=”%2F*%20remove%20border%20around%20all%20input%20elements%20*%2F%0Ainput%3Afocus%20%7B%0A%20%20%20%20outline%3A%20none%3B%7D%0A%2F*%20remove%20border%20around%20all%20textarea%20elements%20*%2F%0Atextarea%3Afocus%20%7B%0A%20%20%20%20outline%3A%20none%3B%7D%0A%2F*%20remove%20border%20around%20all%20select%20elements%20*%2F%0Aselect%3Afocus%20%7B%0A%20%20%20%20outline%3A%20none%3B%7D%0A%2F*%20remove%20border%20around%20all%20input%2Ctextarea%20and%20select%20elements%20*%2F%0Ainput%3Afocus%2C%20textarea%3Afocus%2C%20select%3Afocus%20%7B%0A%20%20%20%20outline%3A%20none%3B%7D%0A%2F*%20remove%20border%20around%20all%20elements%20*%2F%0A%3Afocus%20%7B%0A%20%20%20%20outline%3A%20none%3B%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

[pastacode lang=”css” manual=”*%3Afocus%20%7B%0A%09%09%20%20%20%20outline%3A%200%3B%0A%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

Note: On focus Use outline:0 in spite of outline:none. It’s valid and better practice.

you can also use:

[pastacode lang=”css” manual=”input%3Afocus%7B%0A%09%09%20%20%20border%3A%20transparent%3B%0A%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

[ad type=”banner”]

Categorized in: