shineout/css/Select/styles/select.css

Shein 前端组件库

.so-select {
  position: relative;
}
.so-select-inner {
  width: 100%;
  outline: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-select-result {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  max-height: 80px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  cursor: pointer;
  padding: 6px 24px 0 12px;
}
.so-input-rtl .so-select-result,
so-select-rtl .so-select-result {
  padding: 6px 12px 0 24px;
}
.so-select-result span {
  display: inline-block;
}
.so-select-result span.so-select-ellipsis {
  display: block;
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-select-result .so-select-ellipsis {
  margin-bottom: 6px;
}
.so-select-result .so-select-ellipsis:after {
  content: '\feff ';
}
.so-select-result .so-select-input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 12px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 6px;
  outline: none;
  cursor: text;
  white-space: pre-wrap;
}
.so-select-result .so-select-input:after {
  content: '\feff ';
}
.so-select-result .so-select-input.so-select-full {
  display: block;
}
.so-select-result .so-select-item {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 80%;
  padding: var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal-16, 20px) var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal, 4px);
  margin-right: var(--select-result-padding-horizontal, 4px);
  margin-bottom: 6px;
  background: var(--gray-100, #f8f9fa);
  border-radius: 3px;
  color: inherit;
  text-overflow: ellipsis;
}
.so-input-rtl .so-select-result .so-select-item,
so-select-rtl .so-select-result .so-select-item {
  padding: var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal, 4px) var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal-16, 20px);
  margin-left: var(--select-result-padding-horizontal, 4px);
  margin-right: 0;
}
.so-select-result .so-select-item:after {
  content: '\feff ';
}
.so-select-result .so-select-item-compressed {
  padding: 0 8px;
  text-overflow: unset;
  -webkit-transition: none;
  transition: none;
}
.so-select-result .so-select-item-compressed > span {
  letter-spacing: 2px;
}
.so-select-result .so-select-item-more {
  background: var(--select-compressed-hover-bg, rgba(51, 153, 255, 0.6));
  color: #fff;
}
.so-select-result .so-select-item.so-select-disabled {
  cursor: not-allowed;
  color: var(--input-disabled-color, #999DA8);
}
.so-select-result .so-select-item.so-select-disabled-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-select-result .so-select-item.so-select-disabled-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-select-result .so-select-item .so-select-close {
  right: var(--select-result-padding-horizontal, 4px);
  display: block;
  background-color: transparent;
}
.so-input-rtl .so-select-result .so-select-item .so-select-close,
so-select-rtl .so-select-result .so-select-item .so-select-close {
  left: var(--select-result-padding-horizontal, 4px);
  right: auto;
}
.so-select-result .so-select-item .so-select-close:before,
.so-select-result .so-select-item .so-select-close:after {
  background-color: var(--gray-500, #adb5bd);
  width: 8px;
}
.so-select-result .so-select-item .so-select-close:hover {
  background-color: transparent;
}
.so-select-result .so-select-item .so-select-close:hover:before,
.so-select-result .so-select-item .so-select-close:hover:after {
  background-color: var(--gray-600, #6c757d);
}
.so-select-compressed {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.so-select-compressed .so-select-input {
  white-space: nowrap;
}
.so-select-compressed .so-select-ban-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-select-compressed .so-select-ban-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-select-compressed.so-select-result .so-select-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.so-select-compressed.so-select-result .so-select-item-only {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
.so-select-close-warpper {
  position: absolute;
  top: 50%;
  right: 7px;
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.so-input-rtl .so-select-close-warpper,
so-select-rtl .so-select-close-warpper {
  right: auto;
  left: 7px;
  z-index: 1;
}
.so-select-close-warpper .so-select-indicator {
  right: 2px;
}
.so-input-rtl .so-select-close-warpper .so-select-indicator,
so-select-rtl .so-select-close-warpper .so-select-indicator {
  left: 2px;
  right: auto;
}
.so-select-indicator {
  position: absolute;
  top: 50%;
  right: 7px;
  display: block;
  width: 12px;
  height: 12px;
  color: var(--gray-500, #adb5bd);
  margin-top: -5px;
}
.so-input-rtl .so-select-indicator,
so-select-rtl .so-select-indicator {
  right: auto;
  left: 7px;
}
.so-select-indicator.so-select-close {
  display: none;
  background: var(--select-clear-bg-color, #94a1ae);
  border-radius: 6px;
}
.so-select-indicator.so-select-close:hover {
  background: var(--input-clear-bg-hover-color, #3399ff);
}
.so-select-indicator.so-select-close:after,
.so-select-indicator.so-select-close:before {
  position: absolute;
  top: 5px;
  left: 3px;
  display: block;
  width: 6px;
  height: 1px;
  background: #fff;
  content: ' ';
}
.so-select-indicator.so-select-close:after {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.so-select-indicator.so-select-close:before {
  -webkit-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
          transform: rotate(315deg);
}
.so-select-indicator.so-select-caret {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.so-select-indicator.so-select-caret svg {
  fill: var(--gray-500, #adb5bd);
  vertical-align: top;
}
.so-select-indicator.so-select-multi {
  width: 3px;
  height: 3px;
  background: var(--gray-500, #adb5bd);
  border-radius: 50%;
  -webkit-transform: translate(-3px, 100%);
      -ms-transform: translate(-3px, 100%);
          transform: translate(-3px, 100%);
  text-align: left;
  text-align: start;
}
.so-input-rtl .so-select-indicator.so-select-multi,
so-select-rtl .so-select-indicator.so-select-multi {
  -webkit-transform: translate(3px, 100%);
      -ms-transform: translate(3px, 100%);
          transform: translate(3px, 100%);
}
.so-select-indicator.so-select-multi:after,
.so-select-indicator.so-select-multi:before {
  display: inline-block;
  content: '';
  width: 3px;
  height: 3px;
  background: var(--gray-500, #adb5bd);
  border-radius: 50%;
  position: absolute;
}
.so-select-indicator.so-select-multi:before {
  -webkit-transform: translateX(-5px);
      -ms-transform: translateX(-5px);
          transform: translateX(-5px);
}
.so-input-rtl .so-select-indicator.so-select-multi:before,
so-select-rtl .so-select-indicator.so-select-multi:before {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
          transform: translateX(5px);
}
.so-select-indicator.so-select-multi:after {
  -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
          transform: translateX(-10px);
}
.so-input-rtl .so-select-indicator.so-select-multi:after,
so-select-rtl .so-select-indicator.so-select-multi:after {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
}
.so-select-focus .so-select-close,
.so-select-result:hover .so-select-close,
.so-select-title-box:hover .so-select-close {
  display: block;
}
.so-select-focus .so-select-result-clearable .so-select-multi,
.so-select-result-clearable:hover .so-select-multi,
.so-select-title-box:hover .so-select-result-clearable .so-select-multi {
  visibility: hidden;
}
.so-select-focus .so-select-caret {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.so-select-options,
.so-select-box-list {
  position: absolute;
  z-index: 1000;
  left: 0;
  display: none;
  overflow: hidden;
  width: 100%;
  background: #fff;
  background-clip: padding-box;
  border-radius: var(--input-dropdown-border-radius, 4px);
}
.so-input-rtl .so-select-options,
.so-input-rtl .so-select-box-list,
so-select-rtl .so-select-options,
so-select-rtl .so-select-box-list {
  left: auto;
  right: 0;
}
.so-select-tree {
  width: auto;
  min-width: 100%;
}
.so-select-tree .so-select-tree-wrapper {
  padding: 8px 8px 4px 8px;
}
.so-select-tree .so-select-tree-wrapper .so-tree-node:last-child > div {
  margin-bottom: 4px;
}
.so-select-tree .so-select-tree-wrapper .so-tree-no-line .so-tree-icon-plus:hover::after,
.so-select-tree .so-select-tree-wrapper .so-tree-no-line .so-tree-icon-sub:hover::after {
  background: var(--select-tree-icon-hover-bg-color, var(--gray-100, #f8f9fa));
}
.so-select-tree .so-select-tree-wrapper .so-tree-content {
  color: var(--select-tree-content-color, var(--gray-600, #6c757d));
  white-space: nowrap;
  cursor: default;
}
.so-select-tree .so-select-tree-wrapper .so-tree-content .so-select-tree-node {
  display: block;
  padding: 0 4px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-select-tree .so-select-tree-wrapper .so-tree-content .so-select-tree-node:hover {
  background-color: var(--select-tree-node-hover-bg, var(--primary-color-fade-10, rgba(51, 153, 255, 0.1)));
  color: var(--select-tree-node-hover-color, var(--gray-600, #6c757d));
}
.so-select-tree .so-select-tree-wrapper .so-tree-content .so-select-tree-node.so-select-selected {
  background-color: var(--select-tree-node-selected-bg, var(--primary-color-fade-10, rgba(51, 153, 255, 0.1)));
  color: var(--select-tree-node-selected-color, var(--primary-color, #3399ff));
}
.so-select-tree .so-select-tree-wrapper .so-tree-content .so-select-tree-node.so-select-disabled {
  padding-right: var(--select-result-padding-horizontal, 4px);
  cursor: not-allowed;
  color: var(--select-tree-disabled-content-color, var(--gray-600, #6c757d));
  background: var(--select-tree-disabled-bg-color, #e9ecef);
}
.so-select-tree .so-select-tree-wrapper .so-tree-content .so-select-tree-node.so-select-disabled-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-select-tree .so-select-tree-wrapper .so-tree-content .so-select-tree-node.so-select-disabled-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-select-box-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  min-height: 200px;
  max-height: 320px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.so-select-box-list .so-select-header {
  padding: 6px 12px;
  border-bottom: solid 1px #eee;
}
.so-select-box-list .so-select-header .so-select-header-title {
  vertical-align: middle;
}
.so-select-box-list .so-select-box-options {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.so-select-box-list .so-select-box-options .so-select-no-data {
  padding-top: 60px;
  color: var(--gray-500, #adb5bd);
  text-align: center;
}
.so-select-box-list .so-select-scrollable {
  overflow: auto;
}
.so-select-box-list .so-select-option {
  display: inline-block;
}
.so-select-box-list .so-select-option-ltr {
  padding-right: 12px;
  margin-right: 0;
}
.so-select-box-list .so-select-option-rtl {
  padding-left: 12px;
  margin-left: 0;
}
.so-select-box-list .so-select-filter-input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 180px;
  border-width: 1px;
  border-radius: 2px;
  float: right;
}
.so-select-box-list .so-select-filter-input svg {
  width: 22px;
  height: 22px;
  padding: 4px;
}
.so-select-box-list .so-select-filter-input svg path {
  fill: #999;
}
.so-select-drop-down .so-select-options,
.so-select-drop-down .so-select-box-list {
  top: 100%;
  margin-top: 4px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}
.so-select-drop-up .so-select-options,
.so-select-drop-up .so-select-box-list {
  bottom: 100%;
  margin-bottom: 4px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 -2px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 -2px 12px rgba(0, 0, 0, 0.175);
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.so-select-option {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 6px 24px 6px 12px;
  color: var(--select-option-color, #343a40);
  font-size: var(--font-size-base, 14px);
  line-height: 22px;
  text-overflow: ellipsis;
  -webkit-transition: none;
  transition: none;
  white-space: nowrap;
  background: var(--select-option-bg-color, transparent);
}
.so-input-rtl .so-select-option,
so-select-rtl .so-select-option {
  padding: 6px 12px 6px 24px;
}
.so-select-option.so-select-active {
  background-color: var(--select-item-active-bg, #f5f5f5);
  color: var(--select-item-active-color, #292d32);
  text-decoration: none;
}
.so-select-option.so-select-active > svg {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  fill: var(--primary-color, #3399ff);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.so-input-rtl .so-select-option.so-select-active > svg,
so-select-rtl .so-select-option.so-select-active > svg {
  right: auto;
  left: 8px;
}
.so-select-option:not(.so-select-group):hover {
  background-color: var(--select-option-hover-bg, #f5f5f5);
  color: var(--select-option-hover-color, #3399ff);
}
.so-select-option.so-select-disabled,
.so-select-option.so-checkinput-disabled,
.so-select-option.so-select-disabled:hover,
.so-select-option.so-checkinput-disabled:hover,
.so-select-option.so-select-disabled.so-select-active,
.so-select-option.so-checkinput-disabled.so-select-active {
  background: var(--select-disabled-bg-color, #e9ecef);
  color: var(--select-disabled-color, #343a40);
  cursor: not-allowed;
}
.so-select-group {
  font-size: var(--font-size-small, 12px);
  color: var(--gray-500, #adb5bd);
  cursor: default;
}
.so-select-group:hover {
  color: var(--gray-500, #adb5bd);
}
.so-select-option + .so-select-group:before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  right: 2px;
  border-top: 1px solid #ddd;
}
.so-input-rtl .so-select-option + .so-select-group:before,
so-select-rtl .so-select-option + .so-select-group:before {
  right: 12px;
  left: 2px;
}
.so-select-control-mouse .so-select-option:not(.so-select-group):hover {
  background-color: var(--select-option-hover-bg, #f5f5f5);
  color: var(--select-option-hover-color, #3399ff);
  text-decoration: none;
}
.so-select-control-mouse .so-select-group:hover {
  color: var(--gray-500, #adb5bd);
}
.so-select-control-mouse .so-select-option.so-select-disabled:hover {
  background: var(--select-disabled-bg-color, #e9ecef);
  color: var(--select-disabled-color, #343a40);
}
.so-select-control-keyboard .so-select-option.so-select-hover {
  background-color: var(--select-option-hover-bg, #f5f5f5);
  color: var(--select-option-hover-color, #3399ff);
  text-decoration: none;
}
.so-select-control-keyboard .so-select-option.so-select-group.so-select-hover {
  color: var(--gray-500, #adb5bd);
}
.so-select-control-keyboard .so-select-option {
  cursor: none;
}
span.so-select-option {
  color: var(--gray-500, #adb5bd);
}
.so-select-small .so-select-result {
  padding: 5px 22px 0 10px;
}
.so-select-small .so-select-result .so-select-item,
.so-select-small .so-select-result .so-select-ellipsis,
.so-select-small .so-select-result .so-select-input {
  margin-bottom: 5px;
  font-size: var(--font-size-small, 12px);
}
.so-select-large .so-select-result {
  padding: 8px 28px 0 16px;
}
.so-select-large .so-select-result .so-select-item,
.so-select-large .so-select-result .so-select-ellipsis,
.so-select-large .so-select-result .so-select-input {
  margin-bottom: 8px;
  font-size: var(--font-size-large, 18px);
}
.so-select-multiple .so-select-result:not(.so-select-empty) {
  padding-left: 6px;
  padding-right: 34px;
}
.so-input-rtl .so-select-multiple .so-select-result:not(.so-select-empty),
so-select-rtl .so-select-multiple .so-select-result:not(.so-select-empty) {
  padding-right: 6px;
  padding-left: 34px;
}
.so-select-multiple .so-select-result:not(.so-select-empty) .so-select-close-warpper {
  right: 17px;
}
.so-input-rtl .so-select-multiple .so-select-result:not(.so-select-empty) .so-select-close-warpper,
so-select-rtl .so-select-multiple .so-select-result:not(.so-select-empty) .so-select-close-warpper {
  left: 17px;
  right: auto;
}
.so-select-multiple .so-select-compressed:not(.so-select-empty) {
  padding-left: 6px;
  padding-right: 24px;
}
.so-input-rtl .so-select-multiple .so-select-compressed:not(.so-select-empty),
so-select-rtl .so-select-multiple .so-select-compressed:not(.so-select-empty) {
  padding-right: 6px;
  padding-left: 24px;
}
.so-select-multiple .so-select-compressed:not(.so-select-empty) .so-select-close-warpper {
  right: 7px;
}
.so-input-rtl .so-select-multiple .so-select-compressed:not(.so-select-empty) .so-select-close-warpper,
so-select-rtl .so-select-multiple .so-select-compressed:not(.so-select-empty) .so-select-close-warpper {
  left: 7px;
  right: auto;
}
.so-select-large.so-select-multiple .so-select-result-ltr:not(.so-select-empty) {
  padding-left: 8px;
}
.so-select-large.so-select-multiple .so-select-result-rtl:not(.so-select-empty) {
  padding-right: 8px;
}
.so-select-small.so-select-multiple .so-select-result-ltr:not(.so-select-empty) {
  padding-left: 5px;
}
.so-select-small.so-select-multiple .so-select-result-rtl:not(.so-select-empty) {
  padding-right: 5px;
}
.so-select-disabled .so-select-result {
  cursor: not-allowed;
}
.so-select-disabled .so-select-result .so-select-item {
  background: var(--select-disabled-bg-color, #e9ecef);
}
.so-select-disabled .so-select-result .so-select-item-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-select-disabled .so-select-result .so-select-item-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-select-disabled .so-select-result .so-select-item .so-select-close {
  display: none;
}
.so-select-disabled .so-select-result .so-select-multi {
  visibility: visible;
  cursor: not-allowed;
}
.so-select-root {
  position: absolute;
  top: 0;
  left: 0;
}
.so-input-rtl .so-select-root,
so-select-rtl .so-select-root {
  left: auto;
  right: 0;
}
.so-select-popover .so-select-result {
  padding: var(--select-popover-result-padding, 8px 8px 3px 12px);
  max-height: 112px;
  max-width: 300px;
}
.so-select-popover .so-select-result .so-select-item {
  max-width: 100%;
  color: var(--gray-600, #6c757d);
  font-size: var(--font-size-base, 14px);
}
.so-select-auto-adapt .so-select-options {
  width: auto;
  min-width: 100%;
}
.so-select-pre .so-select-item,
.so-select-pre .so-select-option,
.so-select-pre .so-select-result .so-select-input {
  white-space: pre;
}
.so-select-auto-adapt.so-select-options {
  width: auto;
  min-width: 100%;
}
.so-select-custom-header {
  padding: 6px 12px 6px 12px;
  line-height: 22px;
}
.so-select-title-box > .so-input-title-box-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-select-title-box .so-select-title-box-title-ltr,
.so-select-title-box .so-select-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-select-small .so-select-title-box .so-select-title-box-title-ltr,
.so-select-small .so-select-title-box .so-select-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-select-large .so-select-title-box .so-select-title-box-title-ltr,
.so-select-large .so-select-title-box .so-select-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-select-title-box .so-select-title-box-title-rtl,
.so-select-title-box .so-select-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-select-small .so-select-title-box .so-select-title-box-title-rtl,
.so-select-small .so-select-title-box .so-select-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-select-large .so-select-title-box .so-select-title-box-title-rtl,
.so-select-large .so-select-title-box .so-select-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-select-title-box .so-select-result .so-select-item,
.so-select-title-box .so-select-result .so-select-ellipsis,
.so-select-title-box .so-select-result .so-select-input {
  margin-bottom: 4px;
}
.so-select-small .so-select-title-box .so-select-result .so-select-item,
.so-select-small .so-select-title-box .so-select-result .so-select-ellipsis,
.so-select-small .so-select-title-box .so-select-result .so-select-input {
  margin-bottom: 2px;
}
.so-select-large .so-select-title-box .so-select-result .so-select-item,
.so-select-large .so-select-title-box .so-select-result .so-select-ellipsis,
.so-select-large .so-select-title-box .so-select-result .so-select-input {
  margin-bottom: 4px;
}
.so-select-multiple .so-select-title-box .so-select-title-box-title-ltr,
.so-select-multiple .so-select-title-box .so-select-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-select-small.so-select-multiple .so-select-title-box .so-select-title-box-title-ltr,
.so-select-small.so-select-multiple .so-select-title-box .so-select-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-select-large.so-select-multiple .so-select-title-box .so-select-title-box-title-ltr,
.so-select-large.so-select-multiple .so-select-title-box .so-select-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-select-multiple .so-select-title-box .so-select-title-box-title-rtl,
.so-select-multiple .so-select-title-box .so-select-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-select-small.so-select-multiple .so-select-title-box .so-select-title-box-title-rtl,
.so-select-small.so-select-multiple .so-select-title-box .so-select-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-select-large.so-select-multiple .so-select-title-box .so-select-title-box-title-rtl,
.so-select-large.so-select-multiple .so-select-title-box .so-select-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-select-rtl,
.so-input-rtl {
  direction: rtl;
  text-align: right;
}
.so-list-absolute-wrapper.so-select-rtl {
  direction: rtl;
  text-align: right;
}
.so-list-absolute-wrapper.so-select-rtl .so-select-option {
  padding: 6px 12px 6px 24px;
}
.so-list-absolute-wrapper.so-select-rtl .so-select-option.so-select-active > svg {
  right: auto;
  left: 8px;
}