<script type="module" src="https://md-block.verou.me/md-block.js"></script> <script type="module"> import {BetterSelect} from "./src/BetterSelect.js" customElements.define("better-select", BetterSelect) </script> <link rel="stylesheet" href="src/BetterSelect.css"> <style> @import url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/all.css') layer(framework); @import url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/schemes/talia.css') layer(theme); :root { --color: #4af; } better-select { background: var(--background); &::part(search) { border-radius: 3px; border: 1px solid var(--color); } &::part(search):focus { outline: 2px solid color-mix(in hsl, var(--color), transparent 60%); } &:focus { outline: 2px solid var(--color); } &:state(--open) { outline: none; } &::part(item):focus { color: var(--color); background-color: color-mix(in hsl, var(--color), transparent 80%); } } md-block:not([rendered]) { display: none } </style> <main class="content-width"> <h1>Better Select</h1> <p>A better muli-option input box for HTML</p> <better-select name="better-selection" class="search"> <span slot="placeholder">Placeholder...</span> <option value="first">First value</option> <option value="second">Second value</option> <option value="third">Third value</option> </better-select> <details> <summary>More examples</summary> <form onsubmit='event.preventDefault(); console.table(Object.fromEntries(new FormData(document.querySelector("form")).entries()))'> <label> <span>No Search</span> <better-select> <span slot="placeholder">Placeholder...</span> <option value="first">First value</option> <option value="second">Second value</option> <option value="third">Third value</option> </better-select> </label> <label> <span>No Placeholder</span> <better-select> <option value="first">First value</option> <option value="second">Second value</option> <option value="third">Third value</option> </better-select> </label> <label> <span>Pre-Selected Option</span> <better-select> <option value="first">First value</option> <option value="second" selected>Second value</option> <option value="third">Third value</option> </better-select> </label> <button title="Log form data to dev console">Submit</button> <p>Submit the form to have its form values printed to the dev console.</p> </form> </details> <vertical-spacer triple></vertical-spacer> <md-block src="readme.md"> </md-block> </main>