how to make input and select look nice beside eachother with custom height?

Question

Assume I have the following html and style:

HTML

<div id="container">
    <input type="text"/>
    <select><option>val</option></select>
</div>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input, select {
    width: 50%;
    float: left;
    height: 3em;
    line-height: 3em;
}

How can I make the input and select look nice? In Firefox, the height of the select is good but the text val is written at the top of the select, and in webkit browsers the select's height is not changed.

Is there any way to style those select and input with a custom height to look good in most modern browsers (firefox, webkit, opera, >=IE8 maybe?) when placed side by side?

Answer 1

Select boxes are notoriously resistant to style changes - even if you manage to apply the look you want in one browser, it's almost guaranteed to not work in another. Don't even get me started on mobile.

A lot of people lately have been using a workaround - hide the <select> element, and replace it with a pure HTML structure that uses javascript to mimic the <select> behavior. From there, the html is much much easier to style than the native <select>.

There are a multitude of plugins (across most javascript libraries) that do this, but by far the best I've found is SelectBoxIt. It's extremely easy to use, has universal browser and mobile support, and provides some very advanced options. The only hitch is that it requires jQuery.

http://gregfranko.com/jquery.selectBoxIt.js/