如何知道应用了哪种CSS样式，从哪里(javascript)？

Question

我有一个输入元素，它由javascript函数(我猜)应用了一些CSS。我如何知道正在应用哪种样式(这样我就可以更改/删除它)以及从哪种功能？

您可以在这里看到我的示例：http://impresionados.net/

当你点击大搜索栏时，它的边框会变黄，我不知道是什么原因造成的，也不知道是怎么造成的。我尝试在我的CSS文件中的元素中添加:focus伪类，但是它只是添加到黄色边框重叠它，它没有删除它。如果我将边框设置为0 on :focus，它不会像您看到的那样生效。

那么，我如何知道应用的是哪种样式，以及应用的是哪种代码？

谢谢!

Answer 1

这是用于概述聚焦输入元素的铬标准。这些所谓的“用户代理样式”可能隐藏在检查器中--在这种情况下，您必须首先检查设置中的“显示用户代理样式”。你可以用

input:focus{
   outline:0;
}

但是，请注意，出于可用性的原因，强烈建议向用户表明某个元素当前处于焦点状态！所以你应该应用一些适合你的主题的聚焦风格。

例如，您可以做一些微小的嵌入框阴影(可能删除初始文本，或者至少使其更不透明)：

#yith-s:focus{
    outline:0;
    box-shadow:inset 0 0 2px 1px #ccc;
}

Answer 2

每当我需要找到应用在我的元素上的样式的信息时，我就使用Chrome的浓缩工具。您所要做的就是右键单击所需信息的元素，然后按下“检查元素”。

在右侧，您可以了解元素上应用了哪些规则、从哪些选择器以及从哪些文件中获得了这些选择器的信息。在特定情况下，您可以通过单击“切换元素状态”按钮：！单击以查看图像来诱导特定的伪行为。

对于文本框，您需要在焦点伪类上使用outline: none。我在chrome的检查器中对此进行了测试，在被检查元素上激活了:悬停伪类，并在选择器“#yith-s:聚焦”中添加了大纲:none

​

​

Answer 3

你看到的是浏览器的黄色焦点。您可以使用以下方法隐藏它：

input:focus, textarea:focus {
    outline: none;
}