Question

A friend and I are building a jQuery Form Creator/Validator plugin, and we are also using twitter bootstrap because of its beautiful css elements!

When the user click on the submit button we want to apply a class (that makes the input box-shadow red) to the form elements that are required.

This works for all form elements except text. Apparently twitter bootstrap css is conflicting with the class in some way. The class is added to the element but nothing happens.

If someone out there could give us a hint, we would appreciate it!

Here is the code we are building (this is a simple version, of course):
http://jsfiddle.net/rdenadai/Hr9Gj/5/

Thanks!!

Answer 1

Bootstrap’s CSS rules are taking precedence over yours, since they are more specific, in particular, the input[type="text"] rule. To override them, add the !important declaration to your styles:

.required {
    border:1px solid rgba(196, 39, 39, 0.3) !important;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3) !important;
    box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3) !important;
}
​

DEMO