Web Tutorial: The Smart Drop-down List (Part 2/3)

Welcome back, and in this part of the web tutorial, we'll make what we've done so far, presentable.

First off, let's give the div some rounded corners and a bit of padding.

            .ddl_wrapper div
            {
                border-radius: 5px;
                border: 1px solid #DDDDDD;
                width: 100%;
                padding: 2px;
            }

Next, since the "button" is supposed to be clickable, let's make it even more obvious. Specify that the color is black, then add a hover style to it, changing the color to light grey.

            .ddl_wrapper div
            {
                border-radius: 5px;
                border: 1px solid #DDDDDD;
                width: 100%;
                padding: 2px;
            }

            .ddl_wrapper div div
            {
                width: 10%;
                float: right;
                text-align: center;
                cursor: pointer;
                padding: 0;
                border: none;
                color: #000000;
            }

            .ddl_wrapper div div:hover
            {
                color: #DDDDDD;
            }

Now whenever you mouse over, it changes color!

Time to go for the main source of ugliness - the list. Let's create a style right there.

Again, we make the corners rounded and give it a light grey border, along with some padding. We limit the width to 100% of its parent. display: block ensures that it renders correctly, and setting the margin-top property to 0px ensures that it aligns nicely to the bottom of the div. Lastly, we set list-style-type to none so that the ugly markers are gone.

            .ddl_wrapper div input
            {
                width: 80%;
                height: 90%;
                border: none;
                outline: none;
            }

            .ddl_wrapper ul
            {
                border-radius: 5px;
                border: 1px solid #DDDDDD;
                width: 100%;
                padding: 2px;
                display: block;
                margin-top: 0px;
                list-style-type: none;
            }

Then we style individual list items by setting colors, padding and a light grey underline for readability. The display property needs to be set to block for the underline to work nicely. While we're at it, set the cursor property to pointer to further hammer home the point that the user is supposed to click.

            .ddl_wrapper ul
            {
                border-radius: 5px;
                border: 1px solid #DDDDDD;
                width: 100%;
                padding: 2px;
                display: block;
                margin-top: 0px;
                list-style-type: none;
            }

            .ddl_wrapper ul li
            {
                display: block;
                color: #999999;
                border-bottom: 1px solid #EEEEEE;
                padding: 2px;
                cursor: pointer;
            }

Now we set a hover selector. On mouse over, the background color changes to a nice orange, and the foreground color changes to white.

            .ddl_wrapper ul li
            {
                display: block;
                color: #999999;
                border-bottom: 1px solid #EEEEEE;
                padding: 2px;
                cursor: pointer;
            }

            .ddl_wrapper ul li:hover
            {
                background-color: #FF8800;
                color: #FFFFFF;
            }

Yep, this is good!

Are we done?

Well, if all you really want is for the new drop-down list to behave more or less like a standard drop-down list, here a couple things to do.

            <div>
                <input placeholder="Countries" readonly="readonly" id="txtCountries">
                <div onclick="showList('Countries', true)">&#9660;</div>
            </div>

Then hide the old drop-down list.

            .ddl_wrapper ul li:hover
            {
                background-color: #FF8800;
                color: #FFFFFF;
            }

            .ddl_wrapper select
            {
                display: none;
            }

And there you have it! A perfectly serviceable, pretty drop-down list. But if you want more out of your drop-down list, undo those changes and head on to the next part!

Oh yeah, before I forget...

It's kind of silly to have the textbox use "Countries" as a placeholder now that we actually have a list with values, so just replace it with "(select one)" for consistency.

<input placeholder="(select one)" id="txtCountries">

There you go.

Next

More functionality. The drop-down list should accept your input and offer you suggestions on what to input. Watch this space!