• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Remove webkit border on input on focus

Remove webkit border on input on focus

When a text input has focus it is slightly highlighted in Firefox and Internet Explorer and much more so in the the webkit based browsers (Chrome, Safari, Konqueror). Normally this behavior should be left as-is but I personally recently needed to prevent the highlighting behavior, especially in the webkit based browsers.

Examples

The following image shows a text box which is first not focussed and then focussed in the Chrome and Firefox web browsers. The highlight around the box is quite subtle in Firefox and extremely clear in Chrome; it’s much more obvious in Chrome which field has the focus.

input field focus in chrome and firefox

Preventing the focus highlight

The CSS property "outline" can be used to control outlines around things. I’ve previously covered preventing a dotted border appearing around links in Firefox, and we do the same thing to an input box to prevent the border outline on focus.

If the above input box had a class of "noFocus" like so:

<input class="noFocus" type="text" />

then apply the following CSS style to prevent the focus outline:

.noFocus:focus {
    outline: none;
}

When the user clicks into the text box now it will not have the focus outline. As I mentioned above, you normally wouldn’t want to do this but there may be specific times when it is needed, such as showing a search field which has an image border.

Check Out These Related posts:

  1. CSS3 rounded corner input
  2. jQuery: show plain text in a password field and then make it a regular password field on focus
  3. jQuery: show plain text in a password field and then make it a regular password field on focus – Part 2
  4. border-radius and box-shadow support across browsers

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap