Disable text-field blue highlight in Chrome Extension?

Question

I'm working on a Chrome extension that let's you edit a small text field, and I'm finding the blue highlight around the text field when clicked really annoying.

Is there a way (preferably using CSS) to make this highlight slightly thinner? I find it's a bit too thick, and needs slimming. Thanks!

Screenshot of blue highlight:

Answer 1

Yes; just assign 'none' to the 'outline' property:

input {
    outline: none;
}

JS Fiddle demo.

Please consider that the outline is a UI feature to highlight the currently-active/-focused form element and removing that visual cue might hinder some users.

---

Edited in response to the comment lefty by Beakr, the OP, in comments below:

I was intending to disable it/modify it to see what it could do.

To adjust the style for the outline you can access the individual properties:

elementSelector:focus {
    outline-width: 4px; /* thin, medium, thick or standard CSS length units */
    outline-style: auto; /* or 'inherit', 'none' or border-style (solid, dashed, dotted...) */
    outline-color: #f90; /* standard CSS colors */
}

JS Fiddle demo.

The above can also be condensed, using shorthand notation:

elementSelector:focus {
    outline: 4px auto #f90;
}

The smallest of the possible outline measurements that can be used are either:

elementSelector:focus {
    outline-width: thin; /* or 1px */
}