Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html data-ng-app="app">
<head>
​
  <link rel="stylesheet" href="http: //cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/normalize.min.css">
  <link rel="stylesheet" href="htpp://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body class="ng-cloak" data-ng-controller="mainCtlr">
​
  <div class="row">
    <div class="large-12">
        <button data-ng-click="add()">Add</button>
    </div>
    <div class="large-12 large-centered columns">
        <div data-custom-dropdown="" data-list="family">
            <select data-ng-model="model" data-ng-options="person.name for person in family">
                <option value="">Select a family member</option>
            </select>
        </div>
    </div>
</div>
  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
</body>
</html>
 
.ng-cloak {
  display: none;
}
​
.dropdown-wrapper {
  position: relative;
  *zoom: 1;
}
.dropdown-wrapper:before, .dropdown-wrapper:after {
  content: " ";
  display: table;
}
.dropdown-wrapper:after {
  clear: both;
}
​
.dropdown {
  width: 100%;
  color: white;
  background: url(../images/select-arrow.png) #0092d6 right 0.75em center no-repeat;
  padding-left: 0.4375em;
  line-height: 30px;
  height: 30px;
  border: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  apparence: none;
  text-indent: 0.01px;
  text-overflow: '';
  text-align: left;
  border-radius: 0.1875em;
  position: relative;
}
.dropdown.active {
  background: url(../images/select-arrow.png) #8fcae6 right 0.75em center no-repeat;
}
.dropdown .selected {
  color: white;
}
.dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
}
.dropdown ul, .dropdown li {
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 10000;
  min-width: 100%;
}
.dropdown li.options {
  background: #0092d6;
  color: white;
  padding: 0 0.3125em;
}
.dropdown .options:hover {
  background: #8fcae6;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
selanac82pro
0viewers