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. You can test this in very old browsers and it should give you a decent look-and-feel that matches modern HTML5 browsers, which should always be the goal.
/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */ body optgroup, body optgroup:visited, body optgroup:hover, body optgroup:focus, body optgroup:active { margin: 0; padding: 0; font-style: inherit; font-weight: bold; cursor: pointer; background: #fff; border: none; } body optgroup:visited, body optgroup:hover, body optgroup:focus, body optgroup:active { background: #f9f9ff; } body option, body option:visited, body option:hover, body option:focus, body option:active { margin: 0; padding: 0; cursor: pointer; background: #fff; border: none; } body option:visited, body option:hover, body option:focus, body option:active { background: #f9f9ff; } 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; }
