Starting with a free version of a popular Designmodo user interface kit and free fonts, you can make a great looking and functioning combo box that is ready to use.
In this video, developer David East uses Square UI and Adobe Photoshop to create a combo box in the flat design style. He explains each of the components and HTML elements needed to create a simple and stunning box that falls in line with the flat design trend. As a bonus, East quickly explains how to use the free fonts available from Google Fonts (a great lesson if you have never used this valuable tool).
This step-by-step tutorial is easy to follow and you can watch it while working on your own combo box. After you complete this tutorial, make sure to check out Part 2: How to Make a Flat Styled jQuery UI Combo Box Widget.
What you will learn in this tutorial: Create a combo box from start to finish in Photoshop and make it available for use on your website using HTML and CSS.
Video run time: 18 minutes
Skill level: Basic to intermediate coding and knowledge of development tools, including jQuery, is recommended. Users will also need a working knowledge of Adobe Photoshop.