Select

.talos-select is a native <select> flattened with appearance: none so form semantics and the OS option list survive, then redressed in HUD chrome: a 1px hairline border and a chevron painted as a background SVG. Unlike the text inputs (whose outline lives in an SVG chamfer), the select keeps a real border — so --error / --success recolour that border, and the state reads off the outline, not the text beside it.

Default

<select class="talos-select">
  <option>eu-west-3</option>
  <option>us-east-1</option>
  <option>ap-south-1</option>
</select>

Body-font, light weight. :hover and :focus brighten the border to --talos-edge-strong; focus also adds a 1px ring. The chevron sits 1rem in from the right edge.

State — error & success

<select class="talos-select talos-select--error">
  <option>— pick a region —</option>
</select>
<select class="talos-select talos-select--success">
  <option>eu-west-3</option>
</select>

--error paints the border in --talos-danger; --success in --talos-success. Nesting the select in a .talos-field--error / --success recolours it the same way without the modifier.

Disabled

<select class="talos-select" disabled>
  <option>eu-west-3 (locked)</option>
</select>

:disabled dims to 0.5 and blocks the cursor.

Classes

Wrap in a .talos-field to pair with a label and a help/error line; .talos-field--error / --success recolour the nested select.