<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"> <h2>Javascript Select and Change</h2> <form> <div class="dropdown"> <select class="dropdown-select-version select" name="options"> <option> Architecture </option><option value="x86">x86</option> <option value="x64">x64</option> </select> </div> <a class="btn btn-block btn-success download-target" title="Download" href="#" alt="Download">Download</a> </form> </div> </div>

.select, .download-target { width: 20em; } .select { position: relative; display: block; height: 3em; line-height: 3; background: #2c3e50; overflow: hidden; border-radius: .25em; display: inline-block; display: -webkit-inline-box; border: 1px solid #667780; margin: 1em 0; } select { width: 100%; height: 100%; margin: 0; padding: 0 0 0 .5em; color: #fff; cursor: pointer; } select::-ms-expand { display: none; } .select::after { content: '\25BC'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 1em; background: #34495e; pointer-events: none; } .select:hover::after { color: #f39c12; } .select::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease; }