Want to override Bootstrap, but how to avoid the use of !important?

Question

I am using Bootstrap and want to override some css: I am removing the background, border and the not-allowed-pointer in form fields when in disabled state.

This is how my css looks:

.no-extras {
  border: 0 !important;
  box-shadow: none !important;
  background-color: white !important;
  cursor: default !important;
}

But I know it is a bad thing to use !important. But how should I change the code to avoid using !important? I have tried to make it more specific, with "input.no-extras" and similar, but have not had any luck so far...

See example code here http://plnkr.co/edit/1AuszJ?p=preview

Answer 1

Your adding .no-extras only in .form-group so you can use:

.form-group .no-extras {
    border: 0;
    box-shadow: none;
    background-color: red;
    cursor: default;
}

Plunker

Or you can use any other parent class.

Answer 2

You can override CSS simply by being more specific with your selectors. Anything that selects the same tag in a more specific way is enough to override an existing definition. So, for example, putting a form reference before the target class is enough:

form .form-control[disabled] {
  cursor: default;
}  

Plunker demo