How I am styling Select elements

I’ve complained about styling forms before on this blog. But things have gotten better over the last several years and we are starting to see some browser consistency. I did run into a problem with select elements to find that adding pseudo classes won’t work, which is my usual go to for adding font icons to… things. So I tried something else, using an SVG as a background image and I think it came out pretty great.

Justified (Full Width) CSS Navigation Menu

Justified menus have been an issue for me. Designers have always given me mocks up which show menu items fluidly filling the width of the layout. If you have ever attempted to do this in practice you will know it is more difficult than it sounds, especially if the number of menu items changes during dev. The above code attempts to solve this issue using flexbox which works really great with modern browsers and an IE 9 fallback using display:table which doesn’t work in Firefox because WHY on earth would you want to apply position:relative to an element with display:table-cell #sarcasm.