我有一个输入元素:
<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;
}
最佳答案
如果您最初删除了边框,那么您必须设置
border-width
和
border-style
简而言之,您的 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; }
第二种方式是首选方式,因为使用 !important
会让你的 CSS 更难维护,因为你的类不会按照 CSS 级联,而是按照你的重要性级联。你很容易失去对此的控制。 避免重要的事情,除非很少发生。
如何解决此问题?
为了将来为您提供帮助,您应该在浏览器中使用开发人员工具(Chrome DevTools 或 Firefox 的 Firebug),它会立即向您显示问题。当然了解CSS specificity rules以及它们如何级联。
关于javascript - toggleClass/addClass 不适用于输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12254966/