Bootstrap Snippet select box using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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');
        }
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"select box "
Bootstrap 3.3.0 Snippet by talha8018

Related: See More

Questions / Comments:

"select box " Bootstrap 3.3.0 Snippet by talha8018

Related: See More

Questions / Comments:

"select box "
Bootstrap 3.3.0 Snippet by talha8018