Native Rich Select

Flexible, accessible, lightweight select

customisable style rich content native fallback seamless loading overflow protection form data update native onchange event optional rounded edges inline or full width colour themes right-to-left support shadow option drop-down navigation support click-drag-release to select unbreakable attached to body to aviod clipping click outside to close animated reveal respecting the reduce motion preference browser scaling support unique class names touch screen, mouse, trackpad, keyboard control type to select section labels vector chevron thin scrollbar if needed lightweight easy to use npm package no dependencies

Default

<span class="n-select">
  <select name="demo">
  	<option>Option 1</option>
  	...
  </select>
</span>

Rounded edges

<span class="n-select n-select--rounded">
  <select name="demo">
    <option>Option 1</option>
    ...
  </select>
</span>

Preselected

<span class="n-select">
  <select name="demo">
  	<option>Option 1</option>
  	<option selected>Option 2</option>
  </select>
</span>

Rich options
A B C D E F G H I J K L M N O P Q R S T U V W Y Z

<span class="n-select">
  <select name="demo">
      <option value="value">Description</option>
      ...
  </select>
  <span class="n-select__options">
  	<button value="value">
      <img src="image.svg" alt="Image" />
	  <span>Description</span>
    </button>
  	...
  </span>
</span>

With shadow

<span class="n-select n-select--shadow">
  <select name="demo">
    <option>Option 1</option>
    ...
  </select>
</span>

Colour theme / Large

.n-select {
  --nui-control-bg: darkorchid;
  --nui-control-active-bg: darkorchid;
  --nui-control-highlight: darkblue;
  --nui-control-color: #a5f9a5;
  --nui-control-active-color: #a5f9a5;
}

.n-select {
  font-size: 1.333em;
}

Transparent

.n-select {                
  --nui-control-bg: transparent;
  --nui-control-active-bg: transparent;
  --nui-control-highlight: transparent;
  --nui-control-color: mintcream;
  --nui-control-active-color: mintcream;
}

Full width

<span class="n-select n-select--wide">
  <select name="demo">
  	<option>Option 1</option>
  	...
  </select>
</span>

Navigation

When the select Page 1 Page 2 is next to inline content, it flows with it.

<span class="n-select">
  <span class="n-select__options">
    <button>Go to page...</button>
    <a href="#page1">Home</a>
    <a href="#page2">Forms</a>
  </span>
</span>

Options

Customize size with font-size and --padding.
Theme your select with --nui-control-bg, --nui-control-active-bg, --nui-control-color, --nui-control-active-color and --nui-control-highlight.

Source code

CSS

JS

GitHub

npm i n-select

Developed by Radoslav Sharapanov since 2020, originally a part of the niui library.

Buy me a beer