Is there a solution for dealing with truncated text on short select fields?
I have a narrow select box with padding, and in Chrome the text gets cut off if it's too long. Removing the right padding fixes this issue, but then the menu button looks squished against the edge of the field in IE.
Does anyone know of a solution that doesn't involve hacks or using a different control? It's just a basic select box with some padding applied.
Edit: jsfiddle link: http://jsfiddle.net/jgA8K/2/
Example Html:
<select>
<option>AM</option>
</select>
Example Css:
/** Imagine a CSS RESET here **/
select
{
background: #fff;
border: 1px solid #444;
margin: 10px;
padding: 13px;
width: 70px;
}