Turn off blue highlighting for textbox in Chrome Extension?

Question

I am working on a Chrome extension that allows you to edit a small text box, and I find blue highlighting around the text box when you click really annoying.

Is there a way (preferably using CSS) to make this highlight a little thinner? I find him too fat and need to lose weight. Thanks!

Screenshot with blue color:

Answer 1

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

input { outline: none; } 

JS Fiddle demo .

Please note that the outline is a function of the user interface, in order to highlight the current active / -focused element of the form and the removal of this visual mark may interfere with some users.

---

Edited in response to the comment to the left of Beakr, OP, in the comments below:

I was going to turn it off / change to see what it can do.

To customize the style for outline , you can access 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 compressed using abbreviations:

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

The smallest possible graphical measurements that can be used are:

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