Step 1: Link Assets
Include the minified stylesheet and JavaScript module inside your document structure. These resources can be loaded from your local build outputs directory:
<!-- Include within document head -->
<link rel="stylesheet" href="dist/stylishselect.min.css">
<!-- Include before close of body -->
<script src="dist/stylishselect.min.js"></script>Step 2: Declarative Setup
Simply append the stylish-select attribute to any standard select tag. The dynamic Mutation Observer scans and initializes the element automatically:
<select stylish-select>
<option value="nord">Nord Theme</option>
<option value="dracula">Dracula Theme</option>
<option value="tokyo">Tokyo Night Theme</option>
</select>Live Core Example
Interact with the automatically rendered StylishSelect control below: