zarm/es/select/style/index.css

基于 React 的移动端UI库

.za-select {
  --height: var(--za-select-height, 28px);
  --disabled-color: var(--za-select-disabled-color, var(--za-color-text-disabled));
  --placeholder-color: var(--za-select-placeholder-color, var(--za-color-text-placeholder));
  --arrow-color: var(--za-select-arrow-color, var(--za-arrow-color));
  --arrow-size: var(--za-select-arrow-size, var(--za-arrow-size));
  --arrow-width: var(--za-select-arrow-width, var(--za-arrow-width));
  display: flex;
  align-items: center;
  width: 100%;
}
.za-select__input {
  flex: 1;
  position: relative;
  width: 100%;
  height: var(--height);
  line-height: var(--height);
}

.za-select--placeholder .za-select__input {
  color: var(--placeholder-color);
}

.za-select__arrow {
  margin-left: 5px;
  margin-top: calc(var(--arrow-size) / -2);
}
.za-select__arrow::after {
  display: inline-block;
  content: "";
  border-right: var(--arrow-width) solid var(--arrow-color);
  border-bottom: var(--arrow-width) solid var(--arrow-color);
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: rotate(45deg);
  transition: all 0.15s ease-out;
}

.za-select--disabled .za-select__input {
  color: var(--disabled-color);
}

.za-select--visible .za-select__arrow::after {
  transform: rotate(-45deg);
}