Remove Safari/Chrome textinput/textarea glow

by

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/

More Related Contents:

  1. How to disable text selection highlighting
  2. Same font except its weight seems different on different browsers
  3. Truncating long strings with CSS: feasible yet?
  4. Browser support for CSS Grid
  5. What is WebKit and how is it related to CSS?
  6. CSS3 cross browser linear gradient
  7. IE 6 & IE 7 Z-Index Problem
  8. Browser Support for CSS Page Numbers
  9. Greyscale Background Css Images
  10. complete styles for cross browser CSS zoom
  11. Why doesn’t [CSS feature] work in [browser] but works in others?
  12. How can I zoom an HTML element in Firefox and Opera?
  13. IE7 and the CSS table-cell property
  14. Are CSS selectors case-sensitive?
  15. “text-decoration” and the “:after” pseudo-element, revisited
  16. Sub-Pixels calculated and rendered differently among browsers
  17. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  18. input height differences in Firefox and Chrome
  19. HTML5 image icon to input placeholder
  20. Styling browser-native video controls
  21. IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
  22. IE6/IE7 css border on select element
  23. CSS Image Effects
  24. Can media queries resize based on a div element instead of the screen?
  25. Which CSS properties are inherited?
  26. Cross Site Scripting in CSS Stylesheets
  27. What’s the maximum pixel value of CSS width and height properties?
  28. How to push a footer to the bottom of page when content is short or missing?
  29. Firefox blurs an image when scaled through external CSS or inline style.
  30. How is padding-top as a percentage related to the parent’s width?

Leave a Comment