Home

Awesome

SUIT CSS components-select

A SUIT CSS component providing a solid base for redesigning the native select element.

Note: not tested with the multiple attribute.

Installation

$ npm install suitcss-components-select

Available selectors

Configurable variables

Use these for the widest browser support, instead of overriding.

Example

<div class="Select is-disabled">
  <select class="Select-control" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <svg class="Select-figure" viewBox="0 0 2 1.5">
    <polygon points="0,0 2,0 1,1.5" fill="currentColor">
  </svg>
</div>

The custom arrow (.Select-figure) is optional and can be any element of choice.

@import "suitcss-components-select";

:root {
  --Select-color: gray;
  --Select-focus-color: blue;
}

.Select {
  margin: 2em 0;
}

.Select-control {
  background: lightgray;
  border: 0;
  border-radius: 0.2em;
}

.Select-figure {
  color: blue;
}

Known issues