Question

我有一个输入元素，它有一些CSS应用（我猜），一个javascript函数。我怎么知道正在应用哪种风格（以便我可以更改/删除它）以及从哪个功能？

您可以在此处查看我的示例：http://impresionados.net/

当您点击大搜索栏时，其边框变为黄色，我不知道是什么原因造成的，也不知道是怎么回事。我已经尝试将：focus伪类添加到我的CSS文件中的该元素，但它只是添加到重叠它的黄色边框，它不会删除它。如果我将边框设置为0 on：focus，它将不会生效，如您所见。

那么我怎么知道应用哪种样式以及应用哪种代码？

谢谢！

Answer 1

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

覆盖它

input:focus{
   outline:0;
}

但请注意，出于可用性原因，强烈建议向用户表明某个元素当前处于焦点位置！因此，您应该应用一些适合您主题的焦点样式。< / p>

例如，您可以做一些轻微的插入框阴影（也许删除初始文本或至少使其更不透明）：

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

Answer 2

每当我需要查找有关应用于我的元素的样式的信息时，我都会使用Chrome的inspoctor工具。您所要做的就是右键单击您想要信息的元素，然后按“检查元素”。

在右侧，您可以获得有关在元素上应用了哪些规则的信息，选择器以及这些选择器的文件。在您的特定情况下，您可以通过单击“切换元素状态”按钮来诱导特定的伪行为：！ click to see image

对于您的文本框，您需要使用outline：none;关于焦点伪类。我已经在chrome的检查器中测试了这一点，方法是在被检查元素上激活：hover pseudoclass并在选择器“＃yith-s：focus”中添加outline：none

using chrome's inspector

Answer 3

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

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

Answer 4

在位于/wp-content/themes/peddlar-child/文件夹内的style.css中，请更改以下样式

        #yith-s:focus {
                /*-webkit-box-shadow: 0px 0px 5px #007eff;  
                -moz-box-shadow: 0px 0px 5px #007eff;  
                box-shadow: 0px 0px 5px #007eff;*/
                -webkit-box-shadow: 0;  
                -moz-box-shadow: 0;  
                box-shadow: 0;  
                border: 0;
                background: none;
            }

为：

        #yith-s:focus {
                /*-webkit-box-shadow: 0px 0px 5px #007eff;  
                -moz-box-shadow: 0px 0px 5px #007eff;  
                box-shadow: 0px 0px 5px #007eff;*/
                -webkit-box-shadow: 0;  
                -moz-box-shadow: 0;  
                box-shadow: 0;  
                border: 0;
                background: none;
                                outline:none;
            }

焦点伪类没有outline:none。

Answer 5

在chrome中，右键单击 - ＆gt;检查元素。选择表单，然后在元素样式旁边有一个小按钮

切换元素状态

如果你点击它，你可以在搜索栏上设置焦点，你会看到放置边框的css规则

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

并且它是用户代理样式表

Answer 6

打开浏览器内的开发人员工具，并检查元素。它应该显示特定元素上的所有活动样式。

如果你看不到它，那么还应该有一个名为“Computed styles”或“Trace styles”的标签，它会显示所有样式（甚至是从你的用户代理继承的样式），并且，取决于您的浏览器/开发人员工具，它们来自何处。

Answer 7

使用css重置以覆盖默认浏览器行为是一种很好的做法。你可以看看normalize.css。您可以按原样使用它，也可以使用它来设置项目。例如，如果您想要所有表单输入文本，密码，textarea和select来摆脱这个黄色轮廓，您可以将以下内容添加到重置文件中：

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

如何知道应用哪种CSS样式以及从哪里（javascript）？

7 个答案: