Styling a Custom Select Menu with CSS

Published February 2017

Getting to grips with cross browser form styling

Styling form elements is tough. Each browser and operating system treats them slightly differently and to get a consistent appearance that matches your projects visual style often means resorting to JavaScript plugins like Select 2 or Uniform.

In this screencast Tommy Hodgins takes you through the process of styling a responsive, cross browser compatible select menu using pure CSS. You’ll also learn about data URI images and the underused but widely supported CSS calc() function.

Related Videos


Have your say! or become a member now to take part in the discussion

Meet your instructor
Tommy Hodgins

Toronto-based frontend developer and designer specializing in responsive web design. I co-founded the EQCSS project, and actively participate in the discussion surrounding element queries, container queries, and scoped CSS. In my spare time I enjoy illustrating new ideas and techniques on Codepen, teaching HTML/CSS through local talks and workshops, and playing code golf with friends near and far.