'select' stacking

[OleksandrPopov-San4o]

I have 3 'select'-s in row, and they don't have margin beside them.
This solve it

select+select {margin-left:0.25em;}

A+B selector supports in IE8+
http://caniuse.com/#feat=css-sel2

same for buttons

button+button{margin-left:0.25em;}

[OleksandrPopov-San4o]

Another issue with 'huge' select

I suppose, adding select{max-width:100%} and .input-group select{max-width:70%} will be enough
(max-width supporting from ie8+)

[danleech]

The select + select solution is great; for <IE8 the selects will still work, just with no padding.

Be aware that if you use max-width:100% for anything that has a padding (like <input>s) you need to make sure it uses the border-box box model. This works in IE8+, however the fallback for <IE8 is not graceful (you’ll get stuff overflowing onto new lines).

.class-name {
    -moz-box-sizing: border-box; /* For stupid Firefox */
         box-sizing: border-box; /* Works on IE8+ */
    max-width: 100%;
}

The only solution for <IE8 is to give the element a width of less than 100%, enough to compensate for the padding.

[OleksandrPopov-San4o]

consuming all of this, i've added this:

input, select, option, button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    max-width: 100%;
}

select:not([multiple]) {
    padding: 0 0.25em;
    height: 2em;
}

.subnav {
    padding: 1.25em 0;

    input, button {
        margin: 0 !important;
    }
}

It gives middle vertical align for stackable different elements. Plus gives same height-sizes for Selects, Buttons, Inputs