<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <span class="css3-metro-dropdown"> <select name="dropdown-1"> <option value="0">Client-side Languages</option> <option value="1">JavaScript</option> <option value="2">CSS3</option> <option value="3">HTML5</option> </select> </span> <span class="css3-metro-dropdown css3-metro-dropdown-color-ff1d77"> <select name="dropdown-2"> <option value="0">Server-side Languages</option> <option value="1">PHP</option> <option value="2">JAVA</option> <option value="3">ASP.NET</option> <option value="4">Perl</option> </select> </span> <span class="css3-metro-dropdown css3-metro-dropdown-color-2673ec"> <select name="dropdown-3"> <option value="0">JavaScript Libraries</option> <option value="1">jQuery</option> <option value="2">Y!UI</option> <option value="3">ASP.NET AJAX</option> <option value="4">CoffeeScript</option> </select> </span> <span class="css3-metro-dropdown css3-metro-dropdown-color-ff2e12"> <select name="dropdown-4"> <option value="0">Guitars</option> <option value="1">B.C. Rich</option> <option value="2">ESP</option> <option value="3">Ibanez</option> <option value="4">Jackson</option> </select> </span> </div> </div>

/* * Maked ConqueeXee **/ :root .css3-metro-dropdown option, :root .css3-metro-dropdown:after, :root .css3-metro-dropdown::after, :root .css3-metro-dropdown select { color: #fff; } :root .css3-metro-dropdown select, :root .css3-metro-dropdown:after, :root .css3-metro-dropdown::after { display: block; background: #78ba00; } :root .css3-metro-dropdown select, :root .css3-metro-dropdown option { padding: 8px; } :root .css3-metro-dropdown { position: relative; display: inline-block; border: 0; } :root .css3-metro-dropdown::after { content: "\25bc"; position: absolute; top: 0; right: 0; display: block; width: 32px; font-size: 12px; line-height: 34px; text-align: center; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } :root .css3-metro-dropdown select { height: 34px; border: 0; vertical-align: middle; font: normal 12px/14px "Segoe UI", Arial, Helvetica, Sans-serif; outline: 0 none; } :root .css3-metro-dropdown option { background: #fff; color: #333; } /* more colors */ :root .css3-metro-dropdown-color-ff1d77 select, :root .css3-metro-dropdown-color-ff1d77:after, :root .css3-metro-dropdown-color-ff1d77::after { background: #ff1d77; } :root .css3-metro-dropdown-color-2673ec select, :root .css3-metro-dropdown-color-2673ec:after, :root .css3-metro-dropdown-color-2673ec::after { background: #2673ec; } :root .css3-metro-dropdown-color-ff2e12 select, :root .css3-metro-dropdown-color-ff2e12:after, :root .css3-metro-dropdown-color-ff2e12::after { background: #ff2e12; }