Text Padding in Select Boxes

Question

I\'ve just encountered an obscure issue with select boxes having additional space around text which doesn\'t seem part of the box model. Here are two pictures o

Answer 1

The padding you are seeing is coming from the browser specific stylesheet. In chrome the attribute that is responsible for styling these dropdowns is -webkit-appearance, in firefox it is -moz-appearance

You can standardize the look of your select menus by doing the following:

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 3px;
}

Note: this will not produce good looking results, only give you standard padding/spacing in your select box. To achieve good looking, customizable select boxes that you can fully control the padding/size etc there are tons of tutorials out there. Here is one I found after a quick google search:

http://www.htmllion.com/default-select-dropdown-style-just-css.html