custom-select
Version:
A lightweight JavaScript library for custom HTML <select> creation and managing. No dependencies needed.
61 lines (60 loc) • 2.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Select - Example - Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link rel="stylesheet" href="../../build/custom-select.css">
<style type="text/css">
.dropdown-optgroup {
border-top: 1px solid #e5e5e5;
margin-top: 6px;
padding-top: 6px;
padding-bottom: 6px;
}
.dropdown-optgroup::before {
content: attr(data-label);
display: block;
padding: 3px 20px;
font-weight: bold;
}
.dropdown-item {
cursor: pointer;
}
</style>
</head>
<body>
<div class="col-xs-3">
<h1>Hello, Custom Select!</h1>
<label for="mySelect1">Simple select</label>
<select id="mySelect1">
<option value>Select...</option>
<option value="foo">Foo</option>
<option value="buzz">Buzz</option>
</select>
<br>
<label for="mySelect2">Select with optgroup</label>
<select id="mySelect2">
<option value>Select...</option>
<optgroup label="Cips">
<option value="zizz">Zizz</option>
</optgroup>
<optgroup label="Lips">
<option value="fruit">mango</option>
<option value="flower">rose</option>
<option value="fruit">pineapple</option>
<option value="flower">lotus</option>
<option value="flower">lily</option>
<option value="lorem">Lorem ipsum dolor</option>
</optgroup>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script src="../../build/custom-select.min.js"></script>
<script src="index.js"></script>
</body>
</html>