Question

Got a question for some jQuery wizard who might stumble upon this.

When I use border-left-color, for example, to set a color for an input element using jquery, and when this input element has input:focus{ border-color: somecolor; } in the css file, jquery destroys the input:focus setting. When input gets focus, it stays the color I set it to using jQuery.

Is this a bug?

And if not, how can I prevent this from happening? 🙂

Answer 1

jQuery .css is stronger than the definition in your CSS file because it adds inline styles.

You should add !important to the :focus css definition.

Live DEMO

When using .css() as a setter, jQuery modifies the element’s style property.
For example, $(‘#mydiv’).css(‘color’, ‘green’) is equivalent to document.getElementById(‘mydiv’).style.color = ‘green’.

.css docs