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

Newsletter

12 Comments
  1. Seno Aug 28, 1:26 pm

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

    Reply
    +7
    • 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.

      Reply
      +8
  2. Ivan Aug 28, 4:23 pm

    Man, I wish I had your skills… :/

    Reply
    +10
    • 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.

      Reply
      +8
      • 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!

        Reply
        +4
  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?

    Reply
    +9
    • 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.

      Reply
      +2
  4. Dimitri R. Aug 30, 1:45 am

    Hi David,

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

    Reply
    0
  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.

    Reply
    +2
  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 :)

    Reply
    0
  7. Xander Sep 8, 12:52 pm

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

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters


Download Web Design Freebies & Resources

psd

You have Successfully Subscribed!