Cool select boxes with CSS and jQuery

The select element is notoriously difficult to style with CSS. But with a few CSS hacks, and some jQuery for a complete makeover, we can have hip and attractive select boxes.
A Select Box styled with just CSS
Below is a select box styled with only CSS. It's the easiest way of changing the element's appearance, but there's oddities, and the limitations are well-known.
The HTML
Pretty much standard, but with a wrapper and a div for displaying a pointer character.
HTML
The CSS
Most should be fairly obvious, but there's some browser fixes.
CSS
Giving the -webkit-appearance, -moz-appearance and appearance properties a value of none removes the browser's native UI design and allows you to style your own.

The -moz-focusring pseudo-class values removes the dotted focus ring in Firefox.

Works with IE11, Edge 16+, Chrome 49+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 67+ and Samsung Internet 4+.

A Select Box styled with CSS and jQuery
A select box styled with CSS and pimped with some jQuery. With this method you can change every part of the element's appearance.
The HTML
Standard for the element.
HTML
The CSS
Includes another method of displaying a pointer, using the :after pseudo-class.
CSS
The newSelect class displays the select box, while the options class replaces the native UI drop-down list. Again, the -moz-focusring pseudo-class values removes the dotted focus ring in Firefox.
The jQuery
You don't have to understand how the following jQuery works, but if you do write JavaScript, see jQuery Custom Select Box which contains very simlar annotated code.
jQuery
Works with IE11, Edge 16+, Chrome 49+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 67+ and Samsung Internet 4+. Requires jQuery 3+.

Credit to the author of jQuery Custom Select Box upon which this code is based.