Remove Safari Chrome textinput textarea glow

Question

I am wondering if its possible to remove the default blue and yellow glow when I click on a text input   text area using CSS

User · Answer

lt select class  custom-select  gt           lt option gt option1 lt  option gt           lt option gt option2 lt  option gt           lt option gt option3 lt  option gt           lt option gt option4 lt  option gt   lt  select gt    lt style gt   custom-select           display  inline-block          border  2px solid  bbb          padding  4px 3px 3px 5px          margin  0          font  inherit          outline none     remove focus ring from Webkit            line-height  1 2          background   f8f8f8           -webkit-appearance none     remove the strong OSX influence from Webkit             -webkit-border-radius  6px          -moz-border-radius  6px          border-radius  6px               for Webkit s CSS-only solution         media screen and  -webkit-min-device-pixel-ratio 0              custom-select               padding-right 30px                              Since we removed the default focus styles  we have to add our own         custom-select focus           -webkit-box-shadow  0 0 3px 1px  c00          -moz-box-shadow  0 0 3px 1px  c00          box-shadow  0 0 3px 1px  c00                Select arrow styling         custom-select after           content               position  absolute          top  0          right  0          bottom  0          font-size  60           line-height  30px          padding  0 7px          background   bbb          color  white           pointer-events none           -webkit-border-radius  0 6px 6px 0          -moz-border-radius  0 6px 6px 0          border-radius  0 6px 6px 0         lt  style gt

User · Answer

Sure  You can remove blue border also from all HTML elements using           outline-color  transparent      outline-style  none        And           outline  none

User · Answer

This solution worked for me   input focus       outline  none  important      box-shadow  none  important

User · Answer

This effect can occur on non-input elements  too  I ve found the following works as a more general solution   focus     outline-color  transparent    outline-style  none        Update  You may not have to use the  focus selector  If you have an element  say  lt div id  mydiv  gt stuff lt  div gt   and you were getting the outer glow on this div element  just apply like normal    mydiv     outline-color  transparent    outline-style  none

User · Answer

some times it s happens buttons also then use below to remove the outerline  input hover input active   input focus   textarea active  textarea hover  textarea focus   button focus  button active  button hover       outline 0px  important

User · Answer

I found it helpful to remove the outline on a  sliding door  type of input button  because the outline doesn t cover the right  cap  of the sliding door image making the focus state look a little wonky    input slidingdoorbutton focus   outline  none

User · Answer

I just needed to remove this effect from my text input fields  and I couldn t get the other techniques to work quite right  but this is what works for me   input type  text    input type  text   focus              outline  0              border none              box-shadow none           Tested in Firefox and in Chrome

User · Answer

Carl W      This effect can occur on non-input elements  too  I ve found the following works as a more general solution   focus     outline-color  transparent    outline-style  none       I   ll explain this     focus means it styles the elements that are in focus  So we are styling the elements in focus  outline-color  transparent  means that the blue glow is transparent  outline-style  none  does the same thing

User · Answer

This is the solution for people that do care about accessibility   Please  don t use outline none  for disabling the focus outline  You are killing accessibility of the web if you do this  There is a accessible way of doing this   Check out this article that I ve written to explain how to remove the border in an accessible way   The idea in short is to only show the outline border when we detect a keyboard user  Once a user starts using his mouse we disable the outline  As a result you get the best of the two

User · Answer

Edit  11 years later   Don t do this unless you re going to provide a fallback to indicate which element is active  Otherwise  this harms accessibility as it essentially removes the indication showing which element in a document has focus  Imagine being a keyboard user and not really knowing what element you can interact with  Let accessibility trump aesthetics here  textarea  select  input  button   outline  none     Although  it s been argued that keeping the glow outline is actually beneficial for accessibility as it can help users see which Element is currently focused  You can also use the pseudo-element   focus  to only target the inputs when the user has them selected  Demo  https   jsfiddle net JohnnyWalkerDesign xm3zu0cf

User · Answer

On textarea resizing in webkit based browsers    Setting max-height and max-width on the textarea will not remove the visual resize handle  Try    resize  none     and yes I agree with  try to avoid doing anything which breaks the user s expectation   but sometimes it does make sense  i e  in the context of a web application   To customize the look and feel of webkit form elements from scratch   -webkit-appearance  none

User · Answer

I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day   -webkit-tap-highlight-color  rgba 0 0 0 0     This disables the default button highlighting in webkit mobile browsers

User · Answer

If you want to remove the glow from buttons in Bootstrap  which is not necessarily bad UX in my opinion   you ll need the following code    btn focus   btn active focus   btn active focus    outline-color  transparent    outline-style  none

[css] Remove Safari/Chrome textinput/textarea glow

Examples related to css

Examples related to cross-browser