tdesign-react/es/select/style/index.css

TDesign Component for React

.t-select__wrap {
  width: 100%;
}
.t-select__dropdown .t-popup__content {
  margin: var(--td-comp-paddingTB-s) 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-box-shadow: var(--td-shadow-2);
          box-shadow: var(--td-shadow-2);
}
@-moz-document url-prefix() {
  .t-select__dropdown .t-popup__content {
    scrollbar-color: var(--td-scrollbar-color) transparent;
    scrollbar-width: thin;
  }
}
.t-select__dropdown .t-popup__content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: var(--td-scrollbar-color);
  border-radius: 15px;
}
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:vertical:hover,
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: var(--td-scrollbar-hover-color);
}
.t-select__dropdown-inner {
  min-height: var(--td-comp-size-m);
}
.t-select__dropdown-inner .t-select__list .t-select__list {
  padding: 0;
}
.t-select__dropdown-inner .t-select__list,
.t-select__dropdown-inner .t-tree {
  padding: var(--td-pop-padding-m);
}
.t-select__dropdown-inner--size-s {
  min-height: var(--td-comp-size-xs);
}
.t-select__dropdown-inner--size-s .t-select__list,
.t-select__dropdown-inner--size-s .t-tree {
  padding: var(--td-pop-padding-s);
}
.t-select__dropdown-inner--size-l {
  min-height: var(--td-comp-size-xl);
}
.t-select__dropdown-inner--size-l .t-select__list,
.t-select__dropdown-inner--size-l .t-tree {
  padding: var(--td-pop-padding-l);
}
.t-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.t-select__dropdown.t-popup {
  padding: 0;
}
.t-select__empty.t-size-s {
  line-height: var(--td-comp-size-xs);
}
.t-select__empty {
  text-align: center;
  color: var(--td-text-color-disabled);
  line-height: var(--td-comp-size-m);
  padding: 0 var(--td-comp-paddingLR-s);
}
.t-select__empty.t-size-l {
  line-height: var(--td-comp-size-xl);
}
.t-select__loading-tips.t-size-s {
  min-height: var(--td-comp-size-xs);
  line-height: var(--td-comp-size-xs);
}
.t-select__loading-tips {
  position: fixed;
  top: var(--td-comp-paddingTB-s);
  left: 0;
  bottom: var(--td-comp-paddingTB-s);
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-default);
  min-height: var(--td-comp-size-m);
  line-height: var(--td-comp-size-m);
  color: var(--td-text-color-disabled);
  z-index: 1000;
}
.t-select__loading-tips.t-size-l {
  min-height: var(--td-comp-size-xl);
  line-height: var(--td-comp-size-xl);
}
.t-select-option-group + .t-select-option-group {
  padding-top: var(--td-comp-margin-xs);
  margin-top: var(--td-comp-margin-xs);
}
.t-select-option-group__divider + .t-select-option-group__divider {
  position: relative;
}
.t-select-option-group__divider + .t-select-option-group__divider::before {
  content: "";
  width: 100%;
  height: 1px;
  padding: 0 var(--td-comp-paddingLR-s);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: var(--td-border-level-1-color);
  background-clip: content-box;
}
ul.t-select-option-group__header,
.t-select-option-group__header {
  color: var(--td-text-color-placeholder);
  display: block;
  height: var(--td-comp-size-s);
  line-height: var(--td-comp-size-s);
  padding: 0 var(--td-comp-paddingLR-s);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-select-option-group__header.t-size-l {
  height: var(--td-comp-size-l);
  line-height: var(--td-comp-size-l);
  padding: 0 var(--td-comp-paddingLR-m);
}
.t-select-option-group__header.t-size-s {
  height: var(--td-comp-size-xxs);
  line-height: var(--td-comp-size-xxs);
  padding: 0 var(--td-comp-paddingLR-s);
}
.t-select-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--td-radius-default);
  height: var(--td-comp-size-s);
  font: var(--td-font-body-medium);
  cursor: pointer;
  padding: 0 var(--td-comp-paddingLR-s);
  color: var(--td-text-color-primary);
  -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  --ripple-color: var(--td-bg-color-container-active);
}
.t-select-option span {
  position: relative;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover {
  background-color: var(--td-bg-color-container-hover);
}
.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__label {
  color: inherit;
}
.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__input {
  border-color: var(--td-brand-color);
}
.t-select-option .t-checkbox__label {
  color: var(--td-text-color-primary);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-select-option .t-checkbox {
  width: 100%;
}
.t-select-option.t-is-disabled {
  cursor: not-allowed;
  color: var(--td-text-color-disabled);
  background: var(--td-bg-color-specialcomponent);
}
.t-select-option.t-is-disabled:hover,
.t-select-option.t-is-disabled :active {
  background: var(--td-bg-color-specialcomponent);
}
.t-select-option.t-size-l {
  height: var(--td-comp-size-l);
  padding: 0 var(--td-comp-paddingLR-m);
  font: var(--td-font-body-large);
}
.t-select-option.t-size-m {
  font: var(--td-font-body-medium);
}
.t-select-option.t-size-s {
  height: var(--td-comp-size-xxs);
  padding: 0 var(--td-comp-paddingLR-s);
  font: var(--td-font-body-small);
}
.t-select-option.t-is-selected:not(.t-is-disabled) {
  color: var(--td-brand-color);
  background-color: var(--td-brand-color-light);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.t-select-option.t-is-selected:not(.t-is-disabled) .t-checkbox__label {
  color: var(--td-brand-color);
}
.t-select-option.t-is-selected:not(.t-is-disabled):hover {
  background-color: var(--td-brand-color-light);
}
/** 规范 CSS 类名为 --hover */
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected),
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) {
  background-color: var(--td-bg-color-container-hover);
}
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input,
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input {
  border-color: var(--td-brand-color);
}
.t-select-option.t-select-option__hover .t-checkbox__label,
.t-select-option.t-select-option--hover .t-checkbox__label {
  color: inherit;
}
.t-select-option + .t-select-option {
  margin-top: var(--td-comp-paddingTB-xxs);
}
.t-select.t-select-input--borderless .t-select__right-icon {
  position: relative;
  margin: 0;
}
.t-select .t-fake-arrow {
  color: var(--td-text-color-placeholder);
}
.t-select .t-fake-arrow--active {
  color: var(--td-brand-color);
}
.t-is-selected.t-select-option__hover {
  background-color: var(--td-brand-color-light-hover);
}
.t-is-selected.t-select-option__hover .t-checkbox__label {
  color: var(--td-brand-color);
}