Select theme
NbSelectComponent
| Name | Theme Variable | Default Value | Description |
| select-cursor | pointer | ||
| select-disabled-cursor | default | ||
| select-min-width | 13rem | ||
| select-outline-width | outline-width | 0.375rem | |
| select-outline-color | outline-color | rgba(143, 155, 179, 0.16) | |
| select-icon-offset | 2rem | ||
| select-text-font-family | text-subtitle-font-family | Open Sans, sans-serif | |
| select-placeholder-text-font-family | text-paragraph-font-family | Open Sans, sans-serif | |
| select-tiny-text-font-size | text-caption-2-font-size | 0.75rem | |
| select-tiny-text-font-weight | text-caption-2-font-weight | 600 | |
| select-tiny-text-line-height | text-caption-2-line-height | 1rem | |
| select-tiny-placeholder-text-font-size | text-paragraph-font-size | 0.9375rem | |
| select-tiny-placeholder-text-font-weight | text-paragraph-font-weight | 400 | |
| select-tiny-max-width | 20rem | ||
| select-small-text-font-size | text-subtitle-2-font-size | 0.8125rem | |
| select-small-text-font-weight | text-subtitle-2-font-weight | 600 | |
| select-small-text-line-height | text-subtitle-2-line-height | 1.5rem | |
| select-small-placeholder-text-font-size | text-paragraph-font-size | 0.9375rem | |
| select-small-placeholder-text-font-weight | text-paragraph-font-weight | 400 | |
| select-small-max-width | 20rem | ||
| select-medium-text-font-size | text-subtitle-font-size | 0.9375rem | |
| select-medium-text-font-weight | text-subtitle-font-weight | 600 | |
| select-medium-text-line-height | text-subtitle-line-height | 1.5rem | |
| select-medium-placeholder-text-font-size | text-paragraph-font-size | 0.9375rem | |
| select-medium-placeholder-text-font-weight | text-paragraph-font-weight | 400 | |
| select-medium-max-width | 20rem | ||
| select-large-text-font-size | text-subtitle-font-size | 0.9375rem | |
| select-large-text-font-weight | text-subtitle-font-weight | 600 | |
| select-large-text-line-height | text-subtitle-line-height | 1.5rem | |
| select-large-placeholder-text-font-size | text-paragraph-font-size | 0.9375rem | |
| select-large-placeholder-text-font-weight | text-paragraph-font-weight | 400 | |
| select-large-max-width | 30rem | ||
| select-giant-text-font-size | text-heading-6-font-size | 1.125rem | |
| select-giant-text-font-weight | text-heading-6-font-weight | 700 | |
| select-giant-text-line-height | text-heading-6-line-height | 1.5rem | |
| select-giant-placeholder-text-font-size | text-paragraph-font-size | 0.9375rem | |
| select-giant-placeholder-text-font-weight | text-paragraph-font-weight | 400 | |
| select-giant-max-width | 30rem | ||
| select-rectangle-border-radius | border-radius | 0.25rem | |
| select-semi-round-border-radius | 0.75rem | ||
| select-round-border-radius | 1.5rem | ||
| select-outline-border-style | solid | ||
| select-outline-border-width | 1px | ||
| select-outline-tiny-padding | 0.1875rem, 1rem | ||
| select-outline-small-padding | 0.1875rem, 1rem | ||
| select-outline-medium-padding | 0.4375rem, 1rem | ||
| select-outline-large-padding | 0.6875rem, 1rem | ||
| select-outline-giant-padding | 0.9375rem, 1rem | ||
| select-outline-basic-icon-color | text-hint-color | #8f9bb3 | |
| select-outline-basic-text-color | text-basic-color | #222b45 | |
| select-outline-basic-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-outline-basic-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-basic-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-basic-focus-background-color | background-basic-color-1 | #ffffff | |
| select-outline-basic-focus-border-color | color-primary-default | #3366ff | |
| select-outline-basic-hover-background-color | background-basic-color-3 | #edf1f7 | |
| select-outline-basic-hover-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-basic-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-basic-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-basic-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-basic-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-primary-icon-color | text-hint-color | #8f9bb3 | |
| select-outline-primary-text-color | text-basic-color | #222b45 | |
| select-outline-primary-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-outline-primary-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-primary-border-color | color-primary-default | #3366ff | |
| select-outline-primary-focus-background-color | background-basic-color-1 | #ffffff | |
| select-outline-primary-focus-border-color | color-primary-focus | #274bdb | |
| select-outline-primary-hover-background-color | background-basic-color-3 | #edf1f7 | |
| select-outline-primary-hover-border-color | color-primary-hover | #598bff | |
| select-outline-primary-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-primary-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-primary-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-primary-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-success-icon-color | text-hint-color | #8f9bb3 | |
| select-outline-success-text-color | text-basic-color | #222b45 | |
| select-outline-success-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-outline-success-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-success-border-color | color-success-default | #00d68f | |
| select-outline-success-focus-background-color | background-basic-color-1 | #ffffff | |
| select-outline-success-focus-border-color | color-success-focus | #00b887 | |
| select-outline-success-hover-background-color | background-basic-color-3 | #edf1f7 | |
| select-outline-success-hover-border-color | color-success-hover | #2ce69b | |
| select-outline-success-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-success-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-success-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-success-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-info-icon-color | text-hint-color | #8f9bb3 | |
| select-outline-info-text-color | text-basic-color | #222b45 | |
| select-outline-info-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-outline-info-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-info-border-color | color-info-default | #0095ff | |
| select-outline-info-focus-background-color | background-basic-color-1 | #ffffff | |
| select-outline-info-focus-border-color | color-info-focus | #006fd6 | |
| select-outline-info-hover-background-color | background-basic-color-3 | #edf1f7 | |
| select-outline-info-hover-border-color | color-info-hover | #42aaff | |
| select-outline-info-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-info-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-info-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-info-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-warning-icon-color | text-hint-color | #8f9bb3 | |
| select-outline-warning-text-color | text-basic-color | #222b45 | |
| select-outline-warning-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-outline-warning-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-warning-border-color | color-warning-default | #ffaa00 | |
| select-outline-warning-focus-background-color | background-basic-color-1 | #ffffff | |
| select-outline-warning-focus-border-color | color-warning-focus | #db8b00 | |
| select-outline-warning-hover-background-color | background-basic-color-3 | #edf1f7 | |
| select-outline-warning-hover-border-color | color-warning-hover | #ffc94d | |
| select-outline-warning-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-warning-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-warning-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-warning-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-danger-icon-color | text-hint-color | #8f9bb3 | |
| select-outline-danger-text-color | text-basic-color | #222b45 | |
| select-outline-danger-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-outline-danger-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-danger-border-color | color-danger-default | #ff3d71 | |
| select-outline-danger-focus-background-color | background-basic-color-1 | #ffffff | |
| select-outline-danger-focus-border-color | color-danger-focus | #db2c66 | |
| select-outline-danger-hover-background-color | background-basic-color-3 | #edf1f7 | |
| select-outline-danger-hover-border-color | color-danger-hover | #ff708d | |
| select-outline-danger-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-outline-danger-disabled-border-color | border-basic-color-4 | #e4e9f2 | |
| select-outline-danger-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-danger-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-outline-control-icon-color | color-basic-100 | #ffffff | |
| select-outline-control-text-color | color-basic-100 | #ffffff | |
| select-outline-control-placeholder-text-color | color-basic-100 | #ffffff | |
| select-outline-control-background-color | color-basic-control-transparent-300 | rgba(255, 255, 255, 0.24) | |
| select-outline-control-border-color | color-basic-control-transparent-500 | rgba(255, 255, 255, 0.4) | |
| select-outline-control-focus-background-color | color-basic-control-transparent-500 | rgba(255, 255, 255, 0.4) | |
| select-outline-control-focus-border-color | color-control-transparent-focus-border | #ffffff | |
| select-outline-control-hover-background-color | color-basic-control-transparent-400 | rgba(255, 255, 255, 0.32) | |
| select-outline-control-hover-border-color | color-control-transparent-hover-border | #ffffff | |
| select-outline-control-disabled-background-color | color-control-transparent-disabled | rgba(143, 155, 179, 0.16) | |
| select-outline-control-disabled-border-color | color-basic-control-transparent-500 | rgba(255, 255, 255, 0.4) | |
| select-outline-control-disabled-icon-color | color-basic-100 | #ffffff | |
| select-outline-control-disabled-text-color | color-basic-100 | #ffffff | |
| select-outline-adjacent-border-style | select-outline-border-style | solid | |
| select-outline-adjacent-border-width | select-outline-border-width | 1px | |
| select-outline-basic-open-border-color | select-outline-basic-border-color | #e4e9f2 | |
| select-outline-basic-adjacent-border-color | select-outline-basic-border-color | #e4e9f2 | |
| select-outline-primary-open-border-color | select-outline-primary-border-color | #3366ff | |
| select-outline-primary-adjacent-border-color | select-outline-primary-border-color | #3366ff | |
| select-outline-success-open-border-color | select-outline-success-border-color | #00d68f | |
| select-outline-success-adjacent-border-color | select-outline-success-border-color | #00d68f | |
| select-outline-info-open-border-color | select-outline-info-border-color | #0095ff | |
| select-outline-info-adjacent-border-color | select-outline-info-border-color | #0095ff | |
| select-outline-warning-open-border-color | select-outline-warning-border-color | #ffaa00 | |
| select-outline-warning-adjacent-border-color | select-outline-warning-border-color | #ffaa00 | |
| select-outline-danger-open-border-color | select-outline-danger-border-color | #ff3d71 | |
| select-outline-danger-adjacent-border-color | select-outline-danger-border-color | #ff3d71 | |
| select-outline-control-open-border-color | select-outline-control-border-color | rgba(255, 255, 255, 0.4) | |
| select-outline-control-adjacent-border-color | select-outline-control-border-color | rgba(255, 255, 255, 0.4) | |
| select-filled-border-style | solid | ||
| select-filled-border-width | 1px | ||
| select-filled-tiny-padding | 0.1875rem, 1rem | ||
| select-filled-small-padding | 0.1875rem, 1rem | ||
| select-filled-medium-padding | 0.4375rem, 1rem | ||
| select-filled-large-padding | 0.6875rem, 1rem | ||
| select-filled-giant-padding | 0.9375rem, 1rem | ||
| select-filled-basic-background-color | color-basic-default | #edf1f7 | |
| select-filled-basic-border-color | color-basic-default-border | #edf1f7 | |
| select-filled-basic-icon-color | color-basic-800 | #222b45 | |
| select-filled-basic-text-color | color-basic-800 | #222b45 | |
| select-filled-basic-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-filled-basic-focus-background-color | color-basic-focus | #e4e9f2 | |
| select-filled-basic-focus-border-color | color-basic-focus-border | #c5cee0 | |
| select-filled-basic-hover-background-color | color-basic-hover | #f7f9fc | |
| select-filled-basic-hover-border-color | color-basic-hover-border | #f7f9fc | |
| select-filled-basic-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-basic-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-basic-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-basic-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-primary-background-color | color-primary-default | #3366ff | |
| select-filled-primary-border-color | color-primary-default-border | #3366ff | |
| select-filled-primary-icon-color | text-control-color | #ffffff | |
| select-filled-primary-text-color | text-control-color | #ffffff | |
| select-filled-primary-placeholder-text-color | text-control-color | #ffffff | |
| select-filled-primary-focus-background-color | color-primary-focus | #274bdb | |
| select-filled-primary-focus-border-color | color-primary-focus-border | #1a34b8 | |
| select-filled-primary-hover-background-color | color-primary-hover | #598bff | |
| select-filled-primary-hover-border-color | color-primary-hover-border | #598bff | |
| select-filled-primary-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-primary-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-primary-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-primary-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-success-background-color | color-success-default | #00d68f | |
| select-filled-success-border-color | color-success-default-border | #00d68f | |
| select-filled-success-icon-color | text-control-color | #ffffff | |
| select-filled-success-text-color | text-control-color | #ffffff | |
| select-filled-success-placeholder-text-color | text-control-color | #ffffff | |
| select-filled-success-focus-background-color | color-success-focus | #00b887 | |
| select-filled-success-focus-border-color | color-success-focus-border | #00997a | |
| select-filled-success-hover-background-color | color-success-hover | #2ce69b | |
| select-filled-success-hover-border-color | color-success-hover-border | #2ce69b | |
| select-filled-success-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-success-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-success-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-success-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-info-background-color | color-info-default | #0095ff | |
| select-filled-info-border-color | color-info-default-border | #0095ff | |
| select-filled-info-icon-color | text-control-color | #ffffff | |
| select-filled-info-text-color | text-control-color | #ffffff | |
| select-filled-info-placeholder-text-color | text-control-color | #ffffff | |
| select-filled-info-focus-background-color | color-info-focus | #006fd6 | |
| select-filled-info-focus-border-color | color-info-focus-border | #0057c2 | |
| select-filled-info-hover-background-color | color-info-hover | #42aaff | |
| select-filled-info-hover-border-color | color-info-hover-border | #42aaff | |
| select-filled-info-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-info-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-info-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-info-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-warning-background-color | color-warning-default | #ffaa00 | |
| select-filled-warning-border-color | color-warning-default-border | #ffaa00 | |
| select-filled-warning-icon-color | text-control-color | #ffffff | |
| select-filled-warning-text-color | text-control-color | #ffffff | |
| select-filled-warning-placeholder-text-color | text-control-color | #ffffff | |
| select-filled-warning-focus-background-color | color-warning-focus | #db8b00 | |
| select-filled-warning-focus-border-color | color-warning-focus-border | #b86e00 | |
| select-filled-warning-hover-background-color | color-warning-hover | #ffc94d | |
| select-filled-warning-hover-border-color | color-warning-hover-border | #ffc94d | |
| select-filled-warning-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-warning-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-warning-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-warning-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-danger-background-color | color-danger-default | #ff3d71 | |
| select-filled-danger-border-color | color-danger-default-border | #ff3d71 | |
| select-filled-danger-icon-color | text-control-color | #ffffff | |
| select-filled-danger-text-color | text-control-color | #ffffff | |
| select-filled-danger-placeholder-text-color | text-control-color | #ffffff | |
| select-filled-danger-focus-background-color | color-danger-focus | #db2c66 | |
| select-filled-danger-focus-border-color | color-danger-focus-border | #b81d5b | |
| select-filled-danger-hover-background-color | color-danger-hover | #ff708d | |
| select-filled-danger-hover-border-color | color-danger-hover-border | #ff708d | |
| select-filled-danger-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-danger-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-danger-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-danger-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-control-background-color | color-control-default | #ffffff | |
| select-filled-control-border-color | color-control-default-border | #ffffff | |
| select-filled-control-icon-color | color-basic-800 | #222b45 | |
| select-filled-control-text-color | color-basic-800 | #222b45 | |
| select-filled-control-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-filled-control-focus-background-color | color-control-focus | #edf1f7 | |
| select-filled-control-focus-border-color | color-control-focus-border | #c5cee0 | |
| select-filled-control-hover-background-color | color-control-hover | #f7f9fc | |
| select-filled-control-hover-border-color | color-control-hover-border | #f7f9fc | |
| select-filled-control-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-filled-control-disabled-border-color | border-basic-color-2 | #f7f9fc | |
| select-filled-control-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-filled-control-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-tiny-padding | 0.25rem, 1rem | ||
| select-hero-small-padding | 0.25rem, 1rem | ||
| select-hero-medium-padding | 0.5rem, 1rem | ||
| select-hero-large-padding | 0.75rem, 1rem | ||
| select-hero-giant-padding | 1rem, 1rem | ||
| select-hero-basic-left-background-color | color-basic-200 | #f7f9fc | |
| select-hero-basic-right-background-color | color-basic-default | #edf1f7 | |
| select-hero-basic-icon-color | color-basic-800 | #222b45 | |
| select-hero-basic-text-color | color-basic-800 | #222b45 | |
| select-hero-basic-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-hero-basic-focus-left-background-color | color-basic-300 | #edf1f7 | |
| select-hero-basic-focus-right-background-color | color-basic-400 | #e4e9f2 | |
| select-hero-basic-hover-left-background-color | color-basic-100 | #ffffff | |
| select-hero-basic-hover-right-background-color | color-basic-hover | #f7f9fc | |
| select-hero-basic-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-basic-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-basic-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-primary-left-background-color | color-primary-400 | #598bff | |
| select-hero-primary-right-background-color | color-primary-default | #3366ff | |
| select-hero-primary-icon-color | text-control-color | #ffffff | |
| select-hero-primary-text-color | text-control-color | #ffffff | |
| select-hero-primary-placeholder-text-color | text-control-color | #ffffff | |
| select-hero-primary-focus-left-background-color | color-primary-500 | #3366ff | |
| select-hero-primary-focus-right-background-color | color-primary-focus | #274bdb | |
| select-hero-primary-hover-left-background-color | color-primary-300 | #a6c1ff | |
| select-hero-primary-hover-right-background-color | color-primary-hover | #598bff | |
| select-hero-primary-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-primary-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-primary-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-success-left-background-color | color-success-400 | #2ce69b | |
| select-hero-success-right-background-color | color-success-default | #00d68f | |
| select-hero-success-icon-color | text-control-color | #ffffff | |
| select-hero-success-text-color | text-control-color | #ffffff | |
| select-hero-success-placeholder-text-color | text-control-color | #ffffff | |
| select-hero-success-focus-left-background-color | color-success-500 | #00d68f | |
| select-hero-success-focus-right-background-color | color-success-focus | #00b887 | |
| select-hero-success-hover-left-background-color | color-success-300 | #8cfac7 | |
| select-hero-success-hover-right-background-color | color-success-hover | #2ce69b | |
| select-hero-success-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-success-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-success-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-info-left-background-color | color-info-400 | #42aaff | |
| select-hero-info-right-background-color | color-info-default | #0095ff | |
| select-hero-info-icon-color | text-control-color | #ffffff | |
| select-hero-info-text-color | text-control-color | #ffffff | |
| select-hero-info-placeholder-text-color | text-control-color | #ffffff | |
| select-hero-info-focus-left-background-color | color-info-500 | #0095ff | |
| select-hero-info-focus-right-background-color | color-info-focus | #006fd6 | |
| select-hero-info-hover-left-background-color | color-info-300 | #94cbff | |
| select-hero-info-hover-right-background-color | color-info-hover | #42aaff | |
| select-hero-info-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-info-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-info-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-warning-left-background-color | color-warning-400 | #ffc94d | |
| select-hero-warning-right-background-color | color-warning-default | #ffaa00 | |
| select-hero-warning-icon-color | text-control-color | #ffffff | |
| select-hero-warning-text-color | text-control-color | #ffffff | |
| select-hero-warning-placeholder-text-color | text-control-color | #ffffff | |
| select-hero-warning-focus-left-background-color | color-warning-500 | #ffaa00 | |
| select-hero-warning-focus-right-background-color | color-warning-focus | #db8b00 | |
| select-hero-warning-hover-left-background-color | color-warning-300 | #ffe59e | |
| select-hero-warning-hover-right-background-color | color-warning-hover | #ffc94d | |
| select-hero-warning-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-warning-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-warning-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-danger-left-background-color | color-danger-400 | #ff708d | |
| select-hero-danger-right-background-color | color-danger-default | #ff3d71 | |
| select-hero-danger-icon-color | text-control-color | #ffffff | |
| select-hero-danger-text-color | text-control-color | #ffffff | |
| select-hero-danger-placeholder-text-color | text-control-color | #ffffff | |
| select-hero-danger-focus-left-background-color | color-danger-500 | #ff3d71 | |
| select-hero-danger-focus-right-background-color | color-danger-focus | #db2c66 | |
| select-hero-danger-hover-left-background-color | color-danger-300 | #ffa8b4 | |
| select-hero-danger-hover-right-background-color | color-danger-hover | #ff708d | |
| select-hero-danger-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-danger-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-danger-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-control-left-background-color | color-control-default | #ffffff | |
| select-hero-control-right-background-color | color-control-default | #ffffff | |
| select-hero-control-icon-color | color-basic-800 | #222b45 | |
| select-hero-control-text-color | color-basic-800 | #222b45 | |
| select-hero-control-placeholder-text-color | text-hint-color | #8f9bb3 | |
| select-hero-control-focus-left-background-color | color-basic-200 | #f7f9fc | |
| select-hero-control-focus-right-background-color | color-control-focus | #edf1f7 | |
| select-hero-control-hover-left-background-color | color-basic-100 | #ffffff | |
| select-hero-control-hover-right-background-color | color-control-hover | #f7f9fc | |
| select-hero-control-disabled-background-color | background-basic-color-2 | #f7f9fc | |
| select-hero-control-disabled-icon-color | text-disabled-color | rgba(143, 155, 179, 0.48) | |
| select-hero-control-disabled-text-color | text-disabled-color | rgba(143, 155, 179, 0.48) |
NbOptionListComponent
| Name | Theme Variable | Default Value | Description |
| option-list-max-height | 20rem | ||
| option-list-shadow | none | ||
| option-list-background-color | background-basic-color-1 | #ffffff | |
| option-list-border-style | solid | ||
| option-list-border-width | 0.0625rem | ||
| option-list-border-color | border-basic-color-4 | #e4e9f2 | |
| option-list-border-radius | border-radius | 0.25rem | |
| option-list-adjacent-border-color | option-list-border-color | #e4e9f2 | |
| option-list-adjacent-border-style | option-list-border-style | solid | |
| option-list-adjacent-border-width | option-list-border-width | 0.0625rem |
NbOptionGroupComponent
| Name | Theme Variable | Default Value | Description |
| option-group-text-color | text-hint-color | #8f9bb3 | |
| option-group-tiny-start-padding | 1.25rem | ||
| option-group-small-start-padding | 1.75rem | ||
| option-group-medium-start-padding | 2.25rem | ||
| option-group-large-start-padding | 2.25rem | ||
| option-group-giant-start-padding | 2.75rem |
Previous page
Autocomplete
Next page
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.