"Custom Select box JS/jQuery using Bootstrap and Font Awesome"
Bootstrap 4.1.1 Snippet by MMLTech

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="d-flex flex-column align-items-center h-100"> <div class="col-md-4 my-5"> <h1>Custom Select box JS/jQuery using Bootstrap and Font Awesome</h1> </div> <!-- Make sure you wrap the input inside a form group --> <div class="col-md-4"> <div class="form-group form-custom-select"> <!--Label is not necessary in order for the script to work--> <label for="ExampleCustomSelectBox"><strong>Select a option</strong></label> <!-- Create an input with type hidden and have a use of HTML data tag --> <!-- HTML is allowed as option label --> <input type="hidden" name="ExampleCustomSelectBox" id="ExampleCustomSelectBox" data-toggle="custom-select" > <!-- To get the selection value, you must get ExampleCustomSelectBox.val --> </div> <h5>Selection log</h5> <p>Select a value from the dropdown</p> <ul id="SelectionLog"></ul> </div> </div> </body> <div style="position: fixed;bottom: 5%;right: 5%;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </html>
body, html{ width:100%; height:100%; } .form-custom-select{ position: relative; } .form-custom-select ul{ position: absolute; left:0; display: none; list-style-type: none; margin: 0; padding: 0; background: #fff; border: 1px solid #ced4da; width: 100%; border-radius: 0 0 0.25rem 0.25rem; } .custom-select-dropdown:after{ content: "\25BC"; margin-left: auto; font-weight: bold; position: absolute; right: 1rem; } .custom-select-dropdown, .form-custom-select ul li{ padding:.55rem 1rem; cursor: pointer; display: flex; align-items: center; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; transition: .3s all; } .form-custom-select ul li.selected, .form-custom-select ul li:hover{ background: rgb(214 231 249 / 50%); } .custom-select-dropdown i, .form-custom-select ul li i{ width:24px; } .custom-select-dropdown, .form-custom-select ul li *:not(:last-child){ margin-right: 1rem; } .form-custom-select.toggled .custom-select-dropdown{ border-radius: 0.25rem 0.25rem 0 0; border-bottom: none; } .form-custom-select.toggled .custom-select-dropdown:after{ content: '\25B2'; } .form-custom-select.toggled ul{ display: initial; } .form-custom-select.toggled ul.with-dividers li:not(:last-child){ border-bottom: 1px solid #ced4da; }
(function($){ $.fn.customSelect = function(options) { let settings = $.extend({ options: [], dividers: false, }, options); let build = function (e) { let parent = $(e).closest(".form-group"), toggler = $("<div class='form-control custom-select-dropdown' data-toggle='custom-select-dropdown'></div>"), list = $("<ul></ul>"); if(settings.dividers) list.toggleClass("with-dividers"); list.html(""); $.each(settings.options, function (k, v) { let option = $("<li></li>"); option.attr("data-value", v[0]); option.attr("data-selected", v[2]); if(v[2]) { option.addClass("selected"); toggler.html(v[1]); } option.html(v[1]); list.append(option); }); parent.append(toggler); parent.append(list); $(document).on("click", "[data-toggle='custom-select-dropdown'], .form-custom-select label" ,function () { $(this).closest(".form-group").toggleClass("toggled") }); $(document).on("click", ".form-custom-select ul li:not(.selected)" ,function () { let p = $(this).closest("ul"); $.each(p.children(), function (k, v) { $(this).removeClass("selected"); }); $(this).addClass("selected"); parent.toggleClass("toggled"); $(e).val($(this).attr("data-value")).trigger("change"); toggler.html($(this).html()); }); $(document).mouseup(function(e) { // if the target of the click isn't the container nor a descendant of the container if (parent.hasClass("toggled") && !list.is(e.target) && list.has(e.target).length === 0) { parent.toggleClass("toggled"); } }); }; return this.each(function() { return new build(this, settings); }); }; })(jQuery); $(document).ready(function () { $("#ExampleCustomSelectBox").customSelect({ dividers: true, options: [ // Value / Select option / Is selected [1, '<i class="fas fa-check"></i> Option 1', false], [2, '<i class="fas fa-check"></i> Option 2', false], [3, '<i class="fas fa-check"></i> Option 3', true], [4, '<i class="fas fa-check"></i> Option 4', false], [5, '<i class="fas fa-check"></i> Option 5', false], [6, '<i class="fas fa-check"></i> Option 6', false], [7, '<i class="fas fa-check"></i> Option 7', false], ] }) }); $(document).on("change", "input[name=ExampleCustomSelectBox]", function () { $("#SelectionLog").append("<li>Selected value: " + $(this).val()+ "</li>") })

Related: See More


Questions / Comments: