How do I customize twitter bootstrap's various input sizes without using !important?

css, forms, html, twitter-bootstrap

Solution

Instead of using `!important`, you can use an attribute selector which will override the default as it will be more specific than simply using a `class`. Not good with specificity concept? Refer this article.

For calculating the specificity of your selectors, you can use this website.

[1] Using `class[attr=class]`

.input-large[class="input-large"] {
    width: 400px;
}

OR

[2] Using `tag[attr=class]`

input[class="input-large"] {
    width: 400px;
}

And using `!important` is not an awful practice if you use it in the right place.

Note that above selectors, [1] will make all elements `width` to `400px` having a `class` of `input-large` and in case of selector [2], it will set `width` to `400px` for all `input` elements having `class` of `input-large`, so if you want, you can call multiple classes i.e `.class.class` on `input` tag and use the selector below..

.input-large.input-large-altered {
    width: 400px;
}

So this will select any element having both of these classes set, if you want to be more specific, and want to set only for `input type="text"` than you can always write even a more specific selector like

input[type="text"].input-large.input-large-altered {
   width: 400px;
}

So the above one will only target to `input` element whose `type` attribute is holding a `value` of `text` AND having both the classes i.e `.input-large` `.input-large-altered`

Demo

Demo 2

Demo 3 (Multiple classes)

Problem

Bootstrap's input sizes only expand by width, whereas the buttons expand by both height and font size. (see pic) I'm trying to customize the inputs to expand by height and font size as well. (Note: they're fixing this for the next version, but I'm too impatient to wait) So far I can only achieve this by using the `!important` hack to override the input css. I want to avoid using `!important` at all costs, because it is awful practice. Currently, this is the code I have for expanding the height of `.input-large`. It does not work when I remove `!important`. I assume this is because inputs are given higher priority than classes (which I find absolutely silly, but correct me if I'm wrong). ``` .input-large { width: 210px; height: 44px !important; margin-bottom: 10px !important; line-height: 30px !important; padding: 11px 19px !important; font-size: 17.5px !important; } ``` Is there any way I can achieve this without removing the default input styling and not declaring `!important`? Here's a fiddle: http://jsfiddle.net/xryQK/

Original source