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

Question

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 fon

Answer 1

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)

Answer 2

If you're working off of the bootstrap .less files

an easy solution would be to add an extra entry like:

.form-fatter {
  // Set font for forms
  label,
  input,
  button,
  select,
  textarea {
    // Increase the default with 20%
    #font > .shorthand(@baseFontSize*1.2,normal,@baseLineHeight*1.2); 
  }
}

in your html

<form class="form-horizontal form-fatter">
...
</form>

Answer 3

AFAIK you just put your own customized css after the bootstrap's

example:

... Some codes here ...

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<style>
.input-large {
    width: 210px;
    height: 44px;
    margin-bottom: 10px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
}
</style>

... another code ...

Sorry, i forgot to delete the !important The !important is not needed