custom-select
Version:
A lightweight JavaScript library for custom HTML <select> creation and managing. No dependencies needed.
90 lines (89 loc) • 3 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 - Controls</title>
<link rel="stylesheet" href="../../build/custom-select.css">
<style type="text/css">
body {
font-family: Arial;
font-size: 1.2rem;
}
.custom-select-container {
width: 300px;
}
.custom-select-opener {
white-space: nowrap;
height: 2.3em;
margin-top: 0.5em;
margin-bottom: 1em;
border-radius: 5px;
border: 2px solid #ccc;
}
.custom-select-opener:focus {
outline: none;
border-color: CornflowerBlue;
}
.custom-select-opener span {
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.custom-select-panel {
border-radius: 5px;
}
.example-wrapper{
margin-bottom: 50px
}
</style>
</head>
<body>
<h1>Hello, Custom Select!</h1>
<div class="example-wrapper">
<label for="mySelect1">Simple select</label>
<select id="mySelect1">
<option value>Select...</option>
<option value="foo">Foo</option>
<option value="buzz">Buzz</option>
</select>
<button type="button">Empty</button>
<button type="button">Restore</button>
<button type="button">Toggle Enable</button>
</div>
<div class="example-wrapper">
<label for="mySelect2">Select with optgroup</label>
<select id="mySelect2">
<option value>Select...</option>
<optgroup label="animals">
<option value="feline">lion</option>
<option value="feline">tiger</option>
<option value="feline">cat</option>
<option value="reptile">lizard</option>
</optgroup>
<optgroup label="vegetables">
<option value="fruit">mango</option>
<option value="flower">rose</option>
<option value="fruit">pineapple</option>
<option value="flower">lotus</option>
<option value="flower" selected>lily</option>
</optgroup>
</select>
<button type="button">Empty</button><button type="button">Restore</button><button type="button">Toggle Enable</button>
</div>
<div class="example-wrapper">
<label for="mySelect3">Disabled Select</label>
<select id="mySelect3" disabled>
<option value>Select...</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button">Empty</button><button type="button">Restore</button><button type="button">Toggle Enable</button>
</div>
<script src="../../build/custom-select.min.js"></script>
<script src="index.js"></script>
</body>
</html>