How to use JQuery addClass to override embedded styles?

Question

I have an embedded style in my page to set the style of all the textboxes in a form:

<style type="text/css">
input[type=text], [type=password] {
    border: 1px solid black; 
    font-family: Verdana, Arial, Georgia, 'Trebuchet MS', 'Times New Roman';
    font-size: 12px;
    height: 15px;
    margin: 0px;
    padding: 3px;
}

.invalidinput {
    border: 1px solid red; 
}
</style>

I'm also using JQuery Validation to validate my form and I basically want to change the border color of the textboxes in the form from black to red when there is an error. To do this I have the class ".invalidinput" and I'm using the .addClass to add it to the textbox in the "highlight" section and the .removeClass to remove it in the "unhighlight" one:

<script type="text/javascript">
$(document).ready(function() {
    $("#frmLogin").validate({
        rules: { 
            txtUsername: "required",
            txtPassword: "required"
        },
        messages: { 
            txtUsername: "Enter your username",
            txtPassword: "Enter your password" 
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass("invalidinput");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass("invalidinput");
        },
        errorPlacement: function (error, element){
            if (element.attr("id") == "txtUsername") {
                $(error).appendTo($("label[for='txtUsername']"));
            }
            else if (element.attr("id") == "txtPassword") {
                $(error).appendTo($("label[for='txtPassword']"));
            }
            else {
                error.insertAfter(element);
            }
        }
    }); 
}); 
</script>

The problem is that the .addClass and .removeClass are not working. After hours of searching and trying I've found out that the problem is the embedded style I'm using to set the style of all the textboxes in the page (input[type=text], [type=password] { }). If I remove it or I change it to a named class (like .validinput { }) then, it works just fine. The only workaround I've been able to get working is using this:

"$(element).css("border", "1px solid red");"

instead of this:

$(element).addClass("invalidinput");

My question is, how do I make the .addClass to work with my embedded style?

Thanks.

Answer 1

The reason this doesn't work is because of specificity. The input[type=text] selector is more specific than the invalidinput selector.

This should work:

[type=text], [type=password] {
    border: 1px solid black; 
    /* other styles... */
}

.invalidinput {
    border: 1px solid black; 
}

or just add the input selector to them all:

input[type=text], input[type=password] {
    border: 1px solid black; 
    /* other styles... */
}

input.invalidinput {
    border: 1px solid black; 
}