toggleClass / addClass不适用于输入

Question

我有一个输入元素：

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

以下CSS类：

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

以及以下jQuery代码：

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

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

编辑：

输入已有样式，因此：

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

Answer 1

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

border-width

和

border-style

简而言之，你的CSS应该是这样的：

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

但这一切都取决于你的初始风格是什么，输入的包含元素的背景是什么颜色......

在您提供更多详细信息后编辑

您的类未应用，因为按ID设置样式的类在级联中的优先级高于CSS类。这就是你没有看到它应用的主要原因。

如果您希望自己的CSS课程接管，您有两种选择：

1. 将其设置为重要：

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

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

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

第二种方式是首选方式，因为使用!important将使您的CSS难以维护，因为您的类不按CSS级联，而是根据您的重要性级联。你可以很容易地放松对它的控制。 除非很少出现，否则请避免重要。

如何排除故障？

为了将来帮助您，您应该在浏览器中使用开发人员工具（Chrome DevTools或Firebug for Firefox），以便立即向您显示问题。当然要理解CSS specificity rules以及它们如何级联。

Answer 2

由于您的原始样式是使用#box定义的，因此它比.box-change更具体，并且默认情况下会覆盖您的新添加内容。也可能是.box-change比级联#box更高。

您可以通过以下两种方式解决：

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

或

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