Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to override an external library without !important? Reply To: how to override an external library without !important?

#265320
ThierryVilmart
Participant

bitters is not inline. It is an sass library, part of bourbon, a popular SASS mixins library.
http://refills.bourbon.io/components/

My problems can be simplified to making the class “my-nice-input” more specific and to take priority without using important.

Problem 1:

input[type="submit"] {
  border-color: blue;
}

.my-nice-input {
  border-color: red exclamation mark important;
}

Problem 2, the full problem:
Be more specific than the rule with an id selector all-text-inputs for defining inputs in bitters see below.
I think id selectors are taking precedence.
https://github.com/bigardone/phoenix-react-redux-template/blob/master/web/static/css/bitters/_forms.sass

It would be nice if you can solve problem 1 or 2 above.