How to Create Flat Styled Combo Box with Square UI (Part 1)

How to Create Flat Styled Combo Box with Square UI (Part 1)

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.

Download Source Code


  1. Seno Aug 28, 1:26 pm

    Great tuts david! Very interesting. Wondering if you can make this code working on cross browser.

    • David East
      David East Aug 28, 4:05 pm

      What browser and version are you having problems in? I tested it in modern Chrome, Safari, and FireFox. I also worked it back to IE8.

  2. Ivan Aug 28, 4:23 pm

    Man, I wish I had your skills… :/

    • David East
      David East Aug 29, 6:04 am

      Haha thanks. Trust me, I feel stupid on a daily basis when I see the work others do. It’s all about continuing to learn. Also, these videos are edited so I’m not actually typing that fast.

      • Ivan Aug 29, 3:26 pm

        Well, if you can do it, I can too! Thanks for the encouragement. :) Keep up the great work! :D!

  3. Shaimoom Newaz Aug 28, 9:34 pm

    Wow, this was a clear, concise and efficient tutorial. Excellent work! I imagine you would use an icon-font of the three horizontal bars in lieu of the “Go” text within the to match the PSD?

    • David East Aug 29, 5:57 am

      Yes you definitely could. Or, a slightly easier approach would be an image sprite. You could give the button an i tag with a class of icon-option or something like that.

  4. Dimitri R. Aug 30, 1:45 am

    Hi David,

    what’s the name of the editor, you are using in this tutorial?

  5. Malik Sep 3, 1:58 am

    David, you are very modest! I´m 16 years old and I really want to have your skills.

  6. Natalie Sep 6, 5:18 pm

    Really enjoyed this tutorial and how it was put together! I will definitely be trying this out on future projects.

    Thank you for posting :)

  7. Xander Sep 8, 12:52 pm

    We can’t stand it anymore! We want Square UI Bootstrap!

Leave a Reply

* Minimum length: 20 characters