@workday/canvas-kit-css/select.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-select-input {
  box-sizing: border-box;
}

.cnvs-select-input [data-part="select-hidden-input"] {
  position: absolute;
  top: var(--cnvs-sys-space-zero);
  bottom: var(--cnvs-sys-space-zero);
  left: var(--cnvs-sys-space-zero);
  right: var(--cnvs-sys-space-zero);
  opacity: var(--cnvs-sys-opacity-zero);
  cursor: default;
  pointer-events: none;
  min-width: 100%;
  width: 100%;
}

.cnvs-select-input [data-part="select-start-icon"], .cnvs-select-input [data-part="select-end-icon"], .cnvs-select-input [data-part="select-caret-container"], .cnvs-select-input [data-part="select-start-icon-container"] {
  position: absolute;
  pointer-events: none;
}

.cnvs-select-input [data-part="select-visual-input"] {
  caret-color: transparent;
  background-color: var(--cnvs-sys-color-bg-default);
  color: var(--cnvs-sys-color-text-default);
  cursor: default;
}

.cnvs-select-input [data-part="select-visual-input"]::placeholder {
  color: var(--cnvs-sys-color-text-default);
}

.cnvs-select-input [data-part="select-visual-input"]::selection {
  background-color: transparent;
}

.cnvs-select-input:has(:disabled, .disabled) [data-part="select-caret-icon"] {
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
}


.cnvs-select-input.error-error [data-part="select-visual-input"] {
  background-color: var(--cnvs-brand-error-lightest);
}


.cnvs-select-input.error-caution [data-part="select-visual-input"] {
  background-color: var(--cnvs-brand-alert-lightest);
}


.cnvs-select-card {
  box-sizing: border-box;
  --cnvs-menu-card-max-height: 18.75rem;
}