禁用文本框蓝色突出显示在Chrome扩展?

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.

我正在做一个Chrome扩展，让你编辑一个小的文本框，我发现在文本框周围的蓝色高亮显示非常烦人。

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!

有没有一种方法(最好是使用CSS)使这个突出部分稍微薄一点?我觉得有点太厚了，需要减肥。谢谢!

Screenshot of blue highlight:

蓝色突出显示的截图:

1 个解决方案

#1

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

是的,只需将“none”分配给“outline”属性:

input {
    outline: none;
}

JS Fiddle demo.

JS小提琴演示。

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.

请考虑大纲是一个UI特性，以突出当前活动/焦点表单元素，并删除可视化提示可能会妨碍某些用户。

---

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

以下是Beakr对OP的评论:

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.

JS小提琴演示。

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 */
}