Mo betta selecta

Aaron Gustafson is one smart cookie.

When we first met at South by SouthWest, we started talking about DOM scripting and the cool stuff for which it could be used. He showed me the genesis of a very nifty idea he had been working on during his flight to Austin. I was very excited and wanted to write about it straightaway. But Aaron said it needed more work and he swore me to secrecy.

I’m pleased to announce that Aaron’s idea is ready for its close-up.

The problem:

Form elements, particularly <select> dropdowns are notoriously difficult to style consistently cross-browser, cross-platform. Safari, for instance, won’t let you style the widgets provided by the OS.

The solution:

Replace the <select> element and its associated <option>s with a <ul> element contain <li>s. Then add behaviour to the list to make it work just like the replaced form element. Now you can style that list any way you like.

That’s what Aaron has done. He’s written up the process. It’s well worth reading. At the end of it, you can play with the finished result.

I’ll probably end up using this for the style-switcher here on this site. I’m going to hold for now though: Aaron has promised a sequel to his article which will examine all the accessibility implications.

I like the way his brain works.

Also on AMP

Have you published a response to this? :