Você pode usar o Nice Select para personalizar o `select`: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> !function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('<span class="current"></span><ul class="list"></ul>'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("<li></li>").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery); $(document).ready(function() { $('#sel').niceSelect(); }); <!-- language: lang-css --> .nice-select { border-radius: 5px; height: 30px; /* altura do select */ line-height: 30px; /* este valor deve ser o mesmo acima */ border: solid 1px #bbb; /* cor da borda do select*/ -webkit-tap-highlight-color: transparent; background-color: #fff; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; outline: none; padding-left: 18px; padding-right: 50px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto; } .nice-select::before { border-radius: 0 5px 5px 0; width: 34px; height: 30px; content: ''; display: block; pointer-events: none; position: absolute; top: -1px; right: -1px; text-align: center; -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7; -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7; box-shadow:inset 0px 1px 0px 0px #54a3f7; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4fb4d3), color-stop(1, #3399b8)); background:-moz-linear-gradient(top, #4fb4d3 5%, #3399b8 100%); background:-webkit-linear-gradient(top, #4fb4d3 5%, #3399b8 100%); background:-o-linear-gradient(top, #4fb4d3 5%, #3399b8 100%); background:-ms-linear-gradient(top, #4fb4d3 5%, #3399b8 100%); background:linear-gradient(to bottom, #4fb4d3 5%, #3399b8 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fb4d3', endColorstr='#3399b8',GradientType=0); background-color:#4fb4d3; } .nice-select::after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; z-index: 999; position: absolute; right: 11px; top: 12px; } .nice-select.open::before, .nice-select.open { webkit-box-shadow: inset 0px 2px 12px 0px rgba(124, 96, 96, 0.54); -moz-box-shadow: inset 0px 2px 12px 0px rgba(124, 96, 96, 0.54); box-shadow: inset 0px 2px 12px 0px rgba(124, 96, 96, 0.54); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select .list { border-radius: 5px; background-color: #fff; box-shadow: 0px 5px 5px 0px rgba(200, 200, 200, .6); /* cor da borda dos options em RGB */ border: 1px solid #bbb; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 30px; /* altura das options */ min-height: 30px; /* este valor deve ser o mesmo do acima */ list-style: none; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #5bc0de; /* cor de fundo da option selecionada e ao passar o mouse */ color: #000; /* cor da option ao passar o mouse e do item selecionado*/ } .nice-select .option.selected { font-weight: bold; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <select id="sel"> <option value="1">foo1........</option> <option value="2">foo2</option> <option value="3">foo3</option> <option value="4">foo4</option> <option value="5">foo5</option> </select> <!-- end snippet -->