kessi-cpa Library logo (4.0 KB)

How to Make A Custom Drop-Down List

Concept

A drop-down list is used to ask a user to make a selection among multiple items. The problem when using the standard drop-down list is that browsers display this element in different ways and this is particularly true for the major browsers (Google Chrome, Firefox, and Internet Explorer). One way to solve this problem is to create a custom drop-down list.

In this tutorial, we will use a select element and create a custom drop-down list.

Example

How To

1. Add HTML

<div style="padding: 10px;">
    <select id="dpdCountry" class="dpd" onchange="Country_change()">
        <option value="">Select Your Country</option>
        <option value="United States">United States</option>
        <option value="Canada">Canada</option>
        <option value="Australia">Australia</option>
        <option value="Mexico">Mexico</option>
        <option value="Russia">Russia</option>
        <option value="China">China</option>
        <option value="Japan">Japan</option>
        <option value="Iraq">Iraq</option>
    </select>
</div>

2. Add CSS

body
{
    font-family: Segoe UI,'Helvetica Neue';
    Color: #666666;
    background-color: #fff;
    font-size: 18px;
}

*
{
    box-sizing: border-box;
}

.dpd
{
    width: 300px;
    padding: 12px 10px;
    border: 1px solid #a8a8a8;
    border-radius: 4px;
    cursor: pointer;
    color: #003249;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(http://www.kessitek.com/pgs/Library/Images/dpd.png) no-repeat #fff;
    background-position: right;
    transition: 0.2s;
}

.dpd:focus
{
    border-color: #0947f5;
    outline: none;
}

.dpd::-ms-expand
{
    display: none;
}

3. Add JavaScript

<script type="text/javascript">
    function Country_change() {
        try {
            var cIndex = document.getElementById("dpdCountry").selectedIndex;
            var country = document.getElementById("dpdCountry").options[cIndex].value;
            if (country !== "") {
                window.alert("Your country is " + country);
            }
        }
        catch (err) {
            window.alert(err.message);
        }
    }
</script>
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
mkessi@kessi-cpa.com
(204) 226-9576

Comments & Questions

Thanks! It's exactly what I wanted.

Reply

You're welcome

7
6

How did you make the custom arrow?

Reply

An image I made using Photoshop.

11
13

Add New Comment or Question




Post

REPLY/COMMENT



Email Link


Link to be shared:

×

Confirmation

Copyright © 2016-2019 KESSITEK.