elements-sk/modules/styles/select.scss

// Styles for select and options to make them look better.

@import '../themes/themes';

select,
option {
  padding: 0.6em;
  background-color: var(--surface);
  color: var(--on-surface);
  fill: var(--on-surface);
  border: none;
  outline: none;
  line-height: 20px;
  vertical-align: middle;
}

select {
  border: solid 1px var(--on-surface);
  margin: 0.6em;
}

select:focus {
  outline: dashed 2px var(--on-surface);
  outline-offset: 3px;
}

option:hover {
  background-color: var(--surface-1dp);
}

option:focus {
  background-color: var(--primary);
  color: var(--on-primary);
  transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

option:checked {
  background-color: var(--primary);
  color: var(--on-primary);
  fill: var(--on-primary);
}

select {
  overflow-y: auto;
}