<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <select class="filters" name="select"> <option>Caianinhos</option> <option>Nossa Loja</option> <option>Grandes Marcas</option> <option>option 4</option> <option>option 5</option> </select> </div> </div>

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlElEQVQ4T82STQ5AMBBGn3AI5+EubBzABeyx8nMXB+IEdjJJRwTVJhZ02fS9fPN1Al6e4CXPPwQRMAAlMHuOFAMVkOkIBZADqYdE4Aloge7YgUoSYLEkUbgBenlzLvFJcoHvBHInksyMo0kUrk1fe0DbNx4loZn5AtsSqF0lIhB4vOvFtUgiWW2wK4HXSrgSOCXfCzYpORoU1SJ0uwAAAABJRU5ErkJggg==); background-color: #fff; background-position: 95% center; background-repeat: no-repeat; border: 0; font-size: 12px; overflow: hidden; padding: 10px 15px; text-overflow: ellipsis; white-space: nowrap; margin-right: 20px; margin-bottom: 20px; width: 110px; box-shadow: 0 1px 5px 0 #b0b0b0; }