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

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.


  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