Pure Cross-Browsers CSS Select Control Style
NEVER USE JAVASCRIPT to style elements! If JS is disabled or blocked, your CSS would crash and burn. Always start with pure CSS, then layer over any extra 'scripting glue' you prefer.
REMEMBER! <select> controls like all form fields in HTML are replaced elements, meaning the browsers and OS on the device have some control over the the design and layout of the control. This is why Windows, Apple, and mobile device controls all look different! It is that way for a reason.
Do NOT hijack the control design unless you feel the UI must modify the usability of your web page controls for some reason. This CSS below does not do that. It accepts the core limitations in what it can redesign in the select form control.
This CSS code below works cross-browsers and aligns all the browsers, past and present, to the same basic CSS design. You can customize this code as needed.
body select, body select:visited, body select:hover, body select:focus, body select:active { display: inline-block; width: auto; height: auto; min-width: 0; max-width: none; padding: .17em .17em; margin: 0; text-transform: none; border-radius: .2em; border: 2px solid #bbb; background: #fff; cursor: pointer; -webkit-appearance: listbox; -moz-appearance: listbox; line-height: normal; } body select:visited, body select:hover, body select:focus, body select:active { background: #f9f9ff; border: 2px solid #999; } body select:focus { background: #fff; border: 2px solid #999; } body select:required:visited:valid, body select:required:valid { background: #fff; border: 2px solid #7fbe96; } body select:required:hover:valid { background: #f9f9ff; border: 2px solid #278b3d; } body select:required:focus:valid { background: #fff; border: 2px solid #278b3d; } body select:required:visited:invalid, body select:required:invalid { background: #fff; border: 2px solid #ff6565; } body select:required:hover:invalid { background: #f9f9ff; border: 2px solid #ce2f2f; } body select:required:focus:invalid { background: #fff; border: 2px solid #ce2f2f; } body select[disabled], body select[readonly], body select[disabled="disabled"], body select[readonly="readonly"], body select[disabled]:visited, body select[readonly]:visited, body select[disabled="disabled"]:visited, body select[readonly="readonly"]:visited, body select[disabled]:hover, body select[readonly]:hover, body select[disabled="disabled"]:hover, body select[readonly="readonly"]:hover, body select[disabled]:focus, body select[readonly]:focus, body select[disabled="disabled"]:focus, body select[readonly="readonly"]:focus, body select[disabled]:active, body select[readonly]:active, body select[disabled="disabled"]:active, body select[readonly="readonly"]:active { border: 2px solid #bbb; background: #f0f0f0; color: #999; cursor: default !important; }