# Custom \<select\> drop downs with CSS3

DevFeed: [Custom \<select\> drop downs with CSS3](<https://devfeed.tech/articles/custom-select-drop-downs-with-css3-51993.md>)

Original publisher: [Read original article](<https://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/>)

Author: Lea Verou

Published: 2011-03-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [Lea Verou's blog](<https://devfeed.tech/sources/lea-verou-s-blog.md>)

Topics: [HTML5 and CSS3 tricks](<https://devfeed.tech/topics/html5-and-css3-tricks.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css-properties](<https://devfeed.tech/tags/css-properties.md>), [css3](<https://devfeed.tech/tags/css3.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [opera-bugs](<https://devfeed.tech/tags/opera-bugs.md>), [original](<https://devfeed.tech/tags/original.md>), [pointer-events](<https://devfeed.tech/tags/pointer-events.md>), [tips](<https://devfeed.tech/tags/tips.md>), [w3c](<https://devfeed.tech/tags/w3c.md>), [webkit](<https://devfeed.tech/tags/webkit.md>)

## AI overview

A tutorial on using the CSS3 pointer-events property and related browser-specific techniques to create custom-looking HTML select drop-downs. It covers overlaying a custom arrow, disabling native OSX appearance in WebKit, adding padding for the obscured text, and detecting browser support with JavaScript.

## Source excerpt

The CSS3 Basic UI module defines pointer-events as: The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go "through" an element and target whatever is "underneath" that element instead. This also applies to other "hit testing" behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint(). The property was originally SVG-only, but eventually browsers and the W3C adopted a more limited version for HTML elements too. It can be used in many use cases that weren't possible before (or the solution was overly complicated), one of them being to create custom-looking <select> drop downs, by overlaying an element over the native drop down arrow (to create the custom one) and disallowing pointer events on it. Here's a quick example: -webkit-appearance: none was needed in Webkit to turn off the native OSX appearance (in OSX and maybe Safari on Windows, I didn't test that). However, since that also removes the native drop down arrow, our custom arrow now obscures part of the text, so we had to add a 30px padding-right to the select element, only in Webkit. You can easily detect if pointer-events is supported via JS and only apply this it if it is (eg by adding or removing a class from the body element): if(!('pointerEvents' in document.body.style)) { ... } However, there is one caveat in this: Opera does include pointerEvents in HTML elements as well, but it does not actually support the property on HTML. There's a more elaborate feature detection script here as a Modernizr plugin (but the code is quite short, so you can adapt it to your needs). Also, don't try to replicate the behavior in JavaScript for browsers that don't support this: it's impossible to open a <select> drop down with JavaScript. Or, to put it differently, if you manage to do