Menu
When using Chrome or Safari, an active text box or text area will display a blue/orange border around the box. I have seen some sites get rid of this, but I have copied their CSS and it's still there. How do I do it?
274
You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
Answer: Use CSS outline propertyIn Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .
To disable text selection highlighting in Google Chrome browser using CSS just set -user-select CSS property to none. And no prefix is required for Google Chrome and Opera Browsers.
The following CSS usually removes the default highlight-border:
input:focus {outline: none; } It's worth remembering that the outline is a useful visual feedback for the UI focus, for those users not using a mouse (keyboard navigation, for example), and it's worth substituting another visual cue to replace the loss of the outline.
182
You can use
input:focus, textarea:focus { outline: 0; } But try to give some indication to the user that the form element is focused, for accessibility reasons.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
