Customize Select Option

Question

I need a Select equal to the image:

But this is from Twitter Bootstrap and I use Bootstrap 4 and in the documentation I did not find anything like this. You can do it with Bootstrap 4 or even in pure CSS?

Answer 1

You can use Nice Select to customize select:

!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();
});

.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 {
   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.open {
   -webkit-box-shadow: inset 0px 1px 2px 0px rgba(124, 124, 124, 0.54);
   -moz-box-shadow:    inset 0px 1px 2px 0px rgba(124, 124, 124, 0.54);
   box-shadow:         inset 0px 1px 2px 0px rgba(124, 124, 124, 0.54);
}

.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;
}

<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>