Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple custom dropdown by using css

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 267
    Comment on it

    Hello Readers
    Here is the example of custom drop down by using Css and HTML.

    Here is the HTML

    <div class="container">
        <div class="customSelect">
               <span class="arrow"></span>
               <select id="selectValue">
                    <option value="one">One</option>
                    <option value="two">Two</option>
               </select>    
         </div>
    </div>
    



    Here is the css

     *{
            padding: 0px;
            margin: 0px;
        }
        .container{width: 300px;margin: 0px auto;}
        .customSelect{
            position:relative;
            }
            #selectValue {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    height:24px;
                    border:1px solid #000;
                    width:300px;
                    text-indent: 5px;
                    cursor: pointer;
                }
            #selectValue option{text-indent: 15px;}
            .arrow{
                    cursor:pointer;
                    height:24px; 
                    width:23px;
                    position:absolute;
                    right:0px;
                    background:url('http://54.160.13.227/test-01/images/Dropdown_Arrow.png') #c8c8c8;
                    pointer-events: none;
                }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: