<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>
</select>
<div class="feaBlock">
<ol>
<li>Up & Down key works on list items.</li>
<li>Key enter works on 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;
&: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;
}
&:active {
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
&:after {
content: '\25B2';
}
}
&.active {
&:after {
content: '\25B2';
}
&+.options {
//height: 200px;
//overflow-y: scroll;
}
}
}
::-webkit-scrollbar {
display: none;
}
.options {
position: absolute;
top: 50px;
height: 1px;
width: 100%;
li {
background-color: rgb(255,255,255);
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%;
&:hover, &.active {
background-color: #333;
color: #fff;
}
&:nth-child(1) {
-webkit-transform: translateY(2px);
transform: translateY(2px);
z-index: 6;
}
&:nth-child(2) {
-webkit-transform: translateY(4px);
transform: translateY(4px);
z-index: 5;
}
&:nth-child(3) {
z-index: 4;
}
&:nth-child(4) {
z-index: 3;
}
&:nth-child(5) {
z-index: 2;
}
&: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();
}
External CSS
This Pen doesn't use any external CSS resources.