How to remove focus border outline around text input boxes Chrome

Question

Can anyone explain how to remove the orange or blue border  outline  around text input boxes  I think it only happens on Chrome to show that the input box is active  Here s the input CSS I m using   input       background-color  transparent      border  0px solid      height  20px      width  160px      color   CCC

User · Answer

I ve found the solution  I used  outline none  in the CSS and it seems to have worked  Thanks for the help anyway

User · Answer

lt input style  border none   gt    Worked well for me  Wished to have it fixed in html itself

User · Answer

I found out that you can also use   input focus     border  transparent

User · Answer

this remove orange frame in chrome from all and any element no matter what and where is it    focus       outline  none

User · Answer

input focus       outline none      This will do  Orange outline won t show up anymore

User · Answer

This will definitely work  Orange outline will not show anymore   Common for all tags     focus       outline  none      Specific to some tag  ex  input tag  input focus      outline none

User · Answer

Set   input focus      outline  0 none        important  is just in case  That s not necessary   And now it s gone   ndash Ed

User · Answer

Solution    focus       outline  0      PS  Use outline 0 instead of outline none on focus  It s valid and better practice

User · Answer

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 with outline property  though  textarea focus  input focus      outline  none     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    focus       outline  none          Accessibility warning Please notice that removing outline from input is an accessibility bad practice  Users using screen readers will not be able to see where their pointer is focused at  More info at a11yproject

User · Answer

The current answer didn t work for me with Bootstrap 3 1 1  Here s what I had to override    form-control focus     border-color  inherit    -webkit-box-shadow  none    box-shadow  none

User · Answer

Please use the following syntax to remove the border of text box and remove the highlighted border of browser style   input       background-color transparent      border  0px solid      height 30px      width 260px    input focus       outline none

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

Examples related to css

Examples related to google-chrome

Examples related to input

Examples related to focus

Examples related to border