toggleClass / addClass不适用于输入

Question

I have an input element:

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

And the following CSS class:

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

As well as the following jQuery code:

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

However, it doesn't change the border color as I expect it to. Does anyone know why?

Edit:

The input already has a style, it is thus:

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

Answer 1

If you've originally removed border, then you'll have to set

border-width

and

border-style

So in short your CSS should look like:

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

But it all depends what your initial style is, what colour is background of the containing element of your input etc...

Edit after you've provided more detail

your class doesn't get applied because class that sets style by ID has higher priority in cascade than CSS class. That's the main reason why you're not seeing it applied.

If you'd like your CSS class to take over you have two options:

1. set it as important:

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

2. provide CSS rule that has higher specificity and will take over

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

The second way is the preferred way, because using !important will make your CSS harder to maintain, since your classes don't cascade as per CSS but rather as per your importance. And you can easily loose control over that. Avoid important unless on seldom occasions.

How to troubleshoot this?

To help you in the future, you should be using developer tools in browser (Chrome DevTools or Firebug for Firefox) that would immediately show you the problem. And of course understand CSS specificity rules and how they cascade.

Answer 2

As your original styles are defined with #box it is more specific than .box-change , and by default overrides your new additions. It could also be that .box-change is higher up the cascade than #box .

You could solve it one of two ways:

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

or

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