I am having trouble changing the border color of an input element using jQuery. Here is the setup:
<input id="box" type="text" />
And the CSS class I am trying to toggle:
.box-change
{
border-color:#ffffff;
}
Below is the jQuery code I am using:
$('#box').toggleClass('box-change');
However, despite applying the class, the border color does not change as expected. Can anyone help me understand why this is happening?
Edit:
In addition to the class, the input element already has certain styles applied to it:
#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}