BetterSelect/index.html

<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>