Bootstrap Snippet fancy select 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
<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>Empty</span></p>
  </div>
  
  <div class="dropdown">
    <span class="selLabel">Select Country</span>
    <input type="hidden" name="cd-dropdown">
    <ul class="dropdown-list">
      <li data-value="1">
        <span>Pakistan</span>
      </li>
      <li data-value="2">
        <span>Saudia</span>
      </li>
      <li data-value="3">
        <span>Turkey</span>
      </li>
      <li data-value="4">
        <span>Bangladesh</span>
      </li>
    </ul>
  </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
@import url(https://fonts.googleapis.com/css?family=Roboto);
* {
  margin: 0;
  padding: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
html {
  line-height: 1.2;
}
body {
  background-color: #f5f5f5;
  color: #333;
  font-family: "Roboto", arial, sans-serif;
  font-size: 16px;
}
.selected-item {
  margin: 20px 0;
  text-align: center;
}
.selected-item p {
  font-size: 18px;
}
.selected-item p span {
  font-weight: bold;
}
/* dropdown list */
.dropdown {
  margin: 20px auto;
  width: 300px;
  position: relative;
  -webkit-perspective: 800px;
          perspective: 800px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
  
  $(".selLabel").click(function () {
    $('.dropdown').toggleClass('active');
  });
  
  $(".dropdown-list li").click(function() {
    $('.selLabel').text($(this).text());
    $('.dropdown').removeClass('active');
    $('.selected-item p span').text($('.selLabel').text());
  });
  
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"fancy select"
Bootstrap 3.3.0 Snippet by rasheedbhutto

Related: See More

Questions / Comments:

"fancy select" Bootstrap 3.3.0 Snippet by rasheedbhutto

Related: See More

Questions / Comments:

"fancy select"
Bootstrap 3.3.0 Snippet by rasheedbhutto