jQuery addClass with twitter bootstrap text field

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!!

João Silva · Accepted Answer · 2012-08-23 20:17:06Z

2

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

edited Aug 23, 2012 at 20:17

answered Aug 23, 2012 at 20:11

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rdenadai Over a year ago

Dude! Great, i never would think of that (or perhaps in some time i will)!

João Silva Over a year ago

@rdenadai: Twitter Bootstrap can be tricky sometimes :). Feel free to mark my answer as accepted then meta.stackexchange.com/questions/5234/… Thanks.,

rdenadai Over a year ago

My pleasure! Your answer sure did the job... i'm kind new on bootstrap but is a great tool!

Joseph Shambrook · Accepted Answer · 2012-08-24 10:16:32Z

0

Your CSS isn't targeting the input field specifically enough, causing Bootstrap to override it. Try this:

input[type="text"].required {
    border:1px solid rgba(196, 39, 39, 0.3);
    -webkit-box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3);
    box-shadow: 0px 0px 5px 2px rgba(196, 39, 39, 0.3);
}

answered Aug 24, 2012 at 10:16

Joseph Shambrook

3216 silver badges14 bronze badges

1 Comment

rdenadai Over a year ago

Joao answer solved my problem! Thanks for furter feedback guys... this thread can be closed!

Collectives™ on Stack Overflow

jQuery addClass with twitter bootstrap text field

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related