Floating Icon Select Dropdown

This is a Floating Icon Select Dropdown. It replaces the native OS <select> element with a spatial, hardware-accelerated interface. Its primary function is to provide immediate, physical feedback: as the user interacts with the list, a custom icon detaches from the layout and physically tracks the cursor’s coordinates.

Specs

• Weight: ~4 KB. Zero external dependencies. Inline SVGs minimize HTTP requests.
• Performance: High. State changes rely on CSS variables mapped to transform and opacity. [!] The mousemove event fires continuously; wrapping it in a requestAnimationFrame throttle would optimize CPU usage on lower-end devices.
• Theming / Customization: Centralized. All colors, timings, and dimensions are housed in :root CSS custom properties.
• Responsiveness: Fixed maximum width (34rem), operating cleanly within constrained layout columns.
• Graceful Degradation: [!] Fundamentally broken without JavaScript. The list items are injected via JS, meaning the menu is completely empty if scripts fail. Furthermore, it lacks aria attributes, keyboard navigation, and uses cursor: none, making it inaccessible to screen readers and keyboard users.

Anatomy

• HTML: A structural shell. It contains the main toggle <button> and an empty .dropdown-list-container. The actual content is generated programmatically.
• CSS: The visual engine. It relies heavily on CSS variables to trigger layout shifts. The active item background is not a hover state on the <li>, but a separate pseudo-element (ul::before) that moves up and down the Y-axis.
• JS: The nervous system. It injects the data, calculates the exact pixel height needed to open the menu smoothly (bypassing the CSS height: auto transition limitation), and binds the cursor’s spatial coordinates to the floating element.

Logic

The architectural highlight is the separation of concerns during the mouse-tracking interaction.

dropdownList.addEventListener("mousemove", (e) => {
  const iconSize = root.style.getPropertyValue("--floating-icon-size") || 0;
  const x = e.clientX - dropdownList.getBoundingClientRect().x;
  const y = e.clientY - dropdownList.getBoundingClientRect().y;
  // ... svg logic
  root.style.setProperty("--floating-icon-left", x - iconSize / 2 + "px");
  root.style.setProperty("--floating-icon-top", y - iconSize / 2 + "px");
});

JavaScript is not used to directly manipulate inline styles like element.style.left. Instead, it calculates the cursor’s exact position relative to the bounding box of the dropdown container and writes those raw x and y values to CSS variables on the :root. The CSS engine takes over, applying those variables to absolute positioning coordinates. This keeps the script declarative and the rendering pipeline clean.

Feel

Precise and viscous. The dropdown doesn’t just snap open; it smoothly calculates its required volume and expands. The background highlight glides between items rather than flickering. The floating icon acts as a physical tether to the user’s hand, making the interface feel less like a digital document and more like a tactile, mechanical instrument operating behind glass.