My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using
.css("border-color","rgb(250,0,0)")To adhere to this advice, I created a new class called:
.redBorderColor{
border-color:rgb(255,0,0);
}
In my jQuery code, I then used:
.addClass("redBorderColor")
Upon checking the result in the browser, I noticed that although the class name was added to the textarea's attribute, the border color did not change. Further inspection in Firebug revealed an existing style rule from Pure CSS already being applied to the project:
.pure-form select, .pure-form textarea {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
}
My question is how can I ensure that my new custom style class takes precedence over the previous one? Currently, it seems like Firebug is overriding my styles.