As the others say you would need to use a custom select, here is a very basic example

 $("ul").on("click", ".init", function() { $(this).closest("ul").children('li:not(.init)').toggle(); }); var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); });

 body{ padding:30px; } ul { color: blue; height: 30px; width: 150px; border: 1px #ffff solid; } .init { color: green; } ul li { padding: 5px 10px; z-index: 2; } ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; color: blue;} ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; color: blue; } li.init { cursor: pointer; color: blue;} a#submit { z-index: 1; }

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-unstyled"> <li class="init">[SELECT]</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2</li> <li data-value="value 3">Option 3</li> </ul>

I hope this helps.