How to customise select tag in HTML using CSS

Advertisemen

In this tutorial, we are going to make select menu looks like this

from this

I don't know how it looks in Internet Explorer (windows) but it looks like this in Safari, Chrome and FireFox.
Go ahead and create empty html file and name it whatever you want to name it. then inside the body tag add div to wrap select tag and span tag.
By the way we are going to use awesome font to display cog wheel. Right now your html should look like this.

<body>
<div id="selectMenu">
    <select>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
        <option>Option6</option>
    </select>
    <span class="fa fa-cog" id="cog"></span>
</div>
</body>

I gave it an id of "selectMenu" to the wraper div and id of "cog" to the span and attached the class from awesome font to display cog wheel in the span.
Ok we are done with html now inside the head tag add the following CSS.

<style>
    #selectMenu
    {
        width: 250px;
        border: 1px solid #c3c3c3;
        border-radius: 5px;
        padding: 5px;
        background: #c3eae4;
        box-shadow: 1px 1px 5px #c1c1c1;
    }

    #selectMenu>select
    {
        position: relative;
        width: 250px;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        outline: none;
        background: none;
        z-index: 2;
    }

    #cog
    {
        position: absolute;
        margin-left: -15px;
        z-index: 1;
    }

</style>

That's it, save your file and refresh your browser , now you should have select menu looks like in the picture above.

Your overall code should look like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com
    /ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <style>
        #selectMenu
        {
            width: 250px;
            border: 1px solid #c3c3c3;
            border-radius: 5px;
            padding: 5px;
            background: #c3eae4;
            box-shadow: 1px 1px 5px #c1c1c1;
        }

        #selectMenu>select
        {
            position: relative;
            width: 250px;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            outline: none;
            background: none;
            z-index: 2;
        }

        #cog
        {
            position: absolute;
            margin-left: -15px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div id="selectMenu">
    <select>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
        <option>Option6</option>
    </select>
    <span class="fa fa-cog" id="cog"></span>
</div>
</body>
</html>

Thanks.....

Advertisemen

How to customise select tag in HTML using CSS

Tidak ada komentar:

Posting Komentar