"select box "
Bootstrap 4.0.0 Snippet by gabycampagna

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="selected-item"> <p>You Selected Country : <span>Select</span></p> </div> <select name="" id="cusSelectbox"> <option value="Select">Select</option> <option value="India">India</option> <option value="Nepal">Nepal</option> <option value="Bangladesh">Bangladesh</option> <option value="Sri Lanka">Sri Lanka</option> <option value="Pakistan">Pakistan</option> </select> <div class="feaBlock"> <ol> <li>Up & Down key works in list itesms.</li> <li>Enter works in list items.</li> <li>Mouse Click works in list items.</li> <li>Scrollbar hide, but you can scroll the list items.</li> </ol> </div> </div>
/* font-face */ @import url(https://fonts.googleapis.com/css?family=Roboto); /* variables */ /* default style */ body { background-color: #fff; color: #333; font-family: "Roboto", arial, sans-serif; font-size: 16px; } /* common style */ * { margin: 0; padding: 0; } *, *:after, *:before { box-sizing: border-box; } * { outline: none; } ::-webkit-scrollbar { display: none; } /* */ .container { margin: 0 auto; max-width: 400px; text-align: center; } .selected-item { margin: 20px 0; } /* custom select style */ .cusSelBlock { height: 50px; min-width: 250px; } #cusSelectbox { height: 100%; width: 100%; } .s-hidden { visibility: hidden; } .cusSelBlock { display: inline-block; position: relative; -webkit-perspective: 800px; perspective: 800px; } .selectLabel { position: absolute; left: 0; top: 0; z-index: 9999; background-color: #fff; border: 1px solid #333; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #333; cursor: pointer; display: block; height: 100%; width: 100%; letter-spacing: 2px; line-height: 50px; padding: 0 50px 0 20px; text-align: left; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; -webkit-backface-visibility: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectLabel:after { content: '\25BC'; border-left: 1px solid #333; color: #333; font-size: 12px; line-height: 17px; padding: 10px; text-align: center; position: absolute; right: 0px; top: 15%; height: 70%; width: 50px; } .selectLabel:active { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); } .selectLabel:active:after { content: '\25B2'; } .selectLabel.active:after { content: '\25B2'; } ::-webkit-scrollbar { display: none; } .options { position: absolute; top: 50px; height: 1px; width: 100%; } .options li { background-color: #ffffff; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333; cursor: pointer; display: block; line-height: 50px; list-style: none; opacity: 1; padding: 0 50px 0 20px; text-align: left; -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; position: absolute; top: -50px; left: 0; z-index: 0; height: 50px; width: 100%; } .options li:hover, .options li.active { background-color: #333; color: #fff; } .options li:nth-child(1) { -webkit-transform: translateY(2px); transform: translateY(2px); z-index: 6; } .options li:nth-child(2) { -webkit-transform: translateY(4px); transform: translateY(4px); z-index: 5; } .options li:nth-child(3) { z-index: 4; } .options li:nth-child(4) { z-index: 3; } .options li:nth-child(5) { z-index: 2; } .options li:nth-child(6) { z-index: 1; } /**/ .feaBlock { margin: 20px 0; text-align: left; }
$(function () { var defaultselectbox = $('#cusSelectbox'); var numOfOptions = $('#cusSelectbox').children('option').length; // hide select tag defaultselectbox.addClass('s-hidden'); // wrapping default selectbox into custom select block defaultselectbox.wrap('<div class="cusSelBlock"></div>'); // creating custom select div defaultselectbox.after('<div class="selectLabel"></div>'); // getting default select box selected value $('.selectLabel').text(defaultselectbox.children('option').eq(0).text()); // appending options to custom un-ordered list tag var cusList = $('<ul/>', { 'class': 'options'} ).insertAfter($('.selectLabel')); // generating custom list items for(var i=0; i< numOfOptions; i++) { $('<li/>', { text: defaultselectbox.children('option').eq(i).text(), rel: defaultselectbox.children('option').eq(i).val() }).appendTo(cusList); } // open-list and close-list items functions function openList() { for(var i=0; i< numOfOptions; i++) { $('.options').children('li').eq(i).attr('tabindex', i).css( 'transform', 'translateY('+(i*100+100)+'%)').css( 'transition-delay', i*30+'ms'); } } function closeList() { for(var i=0; i< numOfOptions; i++) { $('.options').children('li').eq(i).css( 'transform', 'translateY('+i*0+'px)').css('transition-delay', i*0+'ms'); } $('.options').children('li').eq(1).css('transform', 'translateY('+2+'px)'); $('.options').children('li').eq(2).css('transform', 'translateY('+4+'px)'); } // click event functions $('.selectLabel').click(function () { $(this).toggleClass('active'); if( $(this).hasClass('active') ) { openList(); focusItems(); } else { closeList(); } }); $(".options li").on('keypress click', function(e) { e.preventDefault(); $('.options li').siblings().removeClass(); closeList(); $('.selectLabel').removeClass('active'); $('.selectLabel').text($(this).text()); defaultselectbox.val($(this).text()); $('.selected-item p span').text($('.selectLabel').text()); }); }); function focusItems() { $('.options').on('focus', 'li', function() { $this = $(this); $this.addClass('active').siblings().removeClass(); }).on('keydown', 'li', function(e) { $this = $(this); if (e.keyCode == 40) { $this.next().focus(); return false; } else if (e.keyCode == 38) { $this.prev().focus(); return false; } }).find('li').first().focus(); }

Related: See More


Questions / Comments: