Selection - ArchCSS

Native text selection

Highlighting any text on the page uses the theme's $primary color as the background with light text - no setup required.

Try selecting this sentence to see the themed ::selection highlight in action.

// Override in your own SCSS before @use (coming soon)
$selection: (
  color      : $light,
  background : $primary,
);

Coming soon. Overriding this via SCSS source isn't available in the published package yet - these are the values baked into the current build.

Config key	Default	Description
`$selection.color`	`$light`	Selected text color
`$selection.background`	`$primary`	Selection highlight background

Disabling selection

Add .select-none to prevent an element's text from being selected - useful for UI chrome like buttons, badges, or drag handles.

<button class="select-none bg-primary text-white px-4 py-2 rounded border-0">
  Drag me
</button>

Placeholders are non-selectable by default. ArchCSS also sets user-select: none on ::before, ::after, and ::placeholder globally, so decorative content never gets accidentally selected.

Custom select component

The .select class turns any container into a positioned dropdown shell: a trigger plus a .select-content panel of .select-option rows, shown by toggling the .show class (or automatically via .hoverable).

<div class="select hoverable">
  Options
  <div class="select-content">
    <div class="select-option">Edit</div>
    <div class="select-option">Duplicate</div>
    <div class="select-option">Delete</div>
  </div>
</div>

Class	Purpose
`.select`	Positioned dropdown container (relative, inline-block)
`.select.hoverable`	Reveals `.select-content` on hover, no JS needed
`.select-content`	Bordered dropdown panel, centered below the trigger; add `.show` to display it manually
`.select-content:not(.show)`	Hidden by default when not using `.hoverable`
`.select-option`	A single row; highlights primary on hover

Positioning. .select-content is absolutely positioned relative to its .select parent and centered below it - give the parent position: relative context by using .select itself as the wrapper, not a plain <div>.