css - Disable bootstrap for one element

Question

What I want to achieve is to disable the Twitter Bootstrap class for my own input element with class named login_button. By default the bootstrap.min.css class is adding unnecessary properties like box-shadow etc. to my input.login_button element.

I know I can define box-shadow: none; but I wonder if there are other possibilities to achieve that?

Answer 1

Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:

input.login_button {
    box-shadow: none;
    border: none;
    line-height: initial;
    /* Etc. */
}

Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.