Color Field

A themed <input type="color">. The wrapper takes Casca's border and radius; the inner swatch fills the field with the chosen color. The popup color picker is the browser's own UI (non-themeable, OS-native). The chosen color submits with the surrounding form, no JavaScript.

Markup

<div class="casca-color-field">
  <label class="casca-color-label" for="brand">Brand</label>
  <input class="casca-color" type="color" id="brand" name="brand" value="#1864ab">
</div>