Javascript toggleClass/addClass不'；我无法处理输入

我有一个输入元素：

<input id="box" type="text" />

以及以下jQuery代码：

$('#box').toggleClass('box-change');

然而，它并没有像我期望的那样改变边框的颜色。有人知道为什么吗

编辑：

输入已具有样式，因此：

#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}

---

如果最初删除了边框，则必须设置

border-width

及

因此，简而言之，您的CSS应该如下所示：

.box-change
{
    border: 1px solid #fff;
}

但这一切都取决于你们最初的风格是什么，你们输入的内容的背景是什么颜色等等

在提供更多详细信息后进行编辑 您的类不会被应用，因为按ID设置样式的类在级联中的优先级高于CSS类。这就是你没有看到它被应用的主要原因

如果你想让CSS类接管你的工作，你有两个选择：

将其视为重要：

.box-change
{
    border: 1px solid #fff !important;
}

提供具有更高特异性并将接管的CSS规则

#box.box-change
{
    border: 1px solid #fff;
}

第二种方法是首选方法，因为使用

！重要信息

将使您的CSS更难维护，因为您的类不是根据CSS级联的，而是根据您的重要性级联的。你可以很容易地控制它除非在很少的情况下，否则避免重要事件。

如何对此进行故障排除？

---

为了在将来帮助您，您应该在浏览器中使用开发人员工具（Chrome DevTools或Firefox的Firebug），这些工具会立即向您显示问题所在。当然，也要理解它们是如何级联的。

由于原始样式是用

#box

定义的，因此它比

更具体。box change

，默认情况下会覆盖新添加的样式。也可能是

.box change

比

#box

更高

您可以通过以下两种方式之一解决此问题：

#box.box-change{
  border-color: #fff;
}

或

---

也许是因为你已经将边框颜色设置为白色，或者你的背景也是白色？你说它不会像你期望的那样改变边框颜色。。。你的确切期望是什么？它有边界吗？如果没有可供选择的边框，则更改

边框颜色将不会产生任何影响。否则它可能是样式表的级联。你用过浏览器检查器吗？@Robert背景不是白色的，我希望它能将边框颜色改为白色——我想这是暗示。@TheBoss-你检查过样式表的层叠吗
#box
比
更具体。box change
，因此可能会覆盖它。我已经尝试修改box change类，以包括OP中显示的边框宽度和样式属性值，但这似乎没有什么区别。问题依然存在。@TheBoss：我编辑了我的答案，以提供为什么它不起作用的信息。
#box.box-change
{
    border: 1px solid #fff;
}

#box.box-change{
  border-color: #fff;
}

.box-change{
  border-color: #fff !important;
}