@opensig/opendesign/lib/_components/in-input/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

@charset "UTF-8";
.o_input {
  --color: var(--input-color, var(--o-color-info1));
  --color-disabled: var(--input-color-disabled, var(--o-color-info4));
  --placeholder: var(--input-placeholder, var(--o-color-info4));
  --bg-color: var(--input-bg-color, transparent);
  --icon-color: var(--input-icon-color, var(--o-color-info3));
  --icon-color-hover: var(--input-icon-color-hover, var(--o-color-info2));
  --icon-color-disabled: var(--input-icon-color-disabled, var(--o-color-info4));
  --icon-size: var(--input-icon-size, var(--o-icon_size-xs));
  --limit-color: var(--input-limit-color, var(--o-color-info4));
  --limit-color-error: var(--input-limit-color-error, var(--o-color-danger1));
  --limit-text-size: var(--input-limit-text-size, var(--o-font_size-tip2));
  --limit-text-height: var(--input-limit-text-height, var(--o-line_height-tip2));
  --min-width: var(--input-min-width, 10px);
  --max-width: var(--input-max-width);
}

.o_input {
  display: inline-flex;
  color: var(--color);
  cursor: inherit;
}

.o_input-disabled {
  color: var(--color-disabled);
}

.o_input-wrap {
  width: 100%;
  margin-right: auto;
}

.o_input-input {
  outline: none;
  border: none;
  color: inherit;
  cursor: inherit;
  background-color: transparent;
  display: inline-flex;
  padding: 0;
  line-height: inherit;
  height: 100%;
  width: 100%;
  font-size: inherit;
  min-width: 20px;
  appearance: none;
}
.o_input-input::-webkit-input-placeholder {
  color: var(--placeholder);
}
.o_input-input:autofill {
  box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
}
.o_input-invalid .o_input-input {
  text-decoration: line-through;
}

.o_input-suffix {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  position: relative;
  margin-left: 8px;
}

.o_input-prefix {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.o_input-suffix-icon {
  display: flex;
  transform: scale(1);
  transition: all var(--o-duration-m1) var(--o-easing-standard-out);
}

.o_input-clear {
  visibility: hidden;
  flex-shrink: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  font-size: var(--icon-size);
  cursor: pointer;
  transform: scale(0.5);
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
.o_input-clear {
  overflow: hidden;
}
.o_input-clear svg {
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
  .o_input-clear:hover svg {
    transform: rotate(180deg);
  }
}
@media (hover: hover) {
  .o_input-clear:hover {
    color: var(--icon-color-hover);
  }
  .o_input-suffix-icon + .o_input-clear {
    position: absolute;
  }
}

@media (hover: hover) {
  .o_input-clearable:hover .o_input-suffix-icon {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5);
  }
  .o_input-clearable:hover .o_input-clear {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}
@media (hover: none) {
  .o_input-clearable .o_input-suffix-icon,
  .o_input-clearable .o_input-clear {
    visibility: visible;
    opacity: 1;
  }
}

.o_input-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--icon-size);
  color: var(--icon-color);
  margin-left: 4px;
  cursor: pointer;
}
@media (hover: hover) {
  .o_input-eye:hover {
    color: var(--icon-color-hover);
  }
}
.o_input-eye :first-child {
  margin-left: 0;
}
.o_input-disabled .o_input-eye, .o_input-readonly .o_input-eye {
  color: var(--icon-color-disabled);
}

.o_input-password {
  font-family: var(--o-font-password);
}

.o_input-limit {
  margin-left: 4px;
  right: 8px;
  bottom: 4px;
  color: var(--limit-color);
  font-size: var(--limit-text-size);
  line-height: var(--limit-text-height);
  z-index: 0;
}
.o_input-limit b {
  font-weight: normal;
}

.o_input-limit-error > b {
  color: var(--limit-color-error);
}

/* auto width */
.o_input-auto-width {
  width: auto;
  max-width: 100%;
}

.o_input-wrap-auto-width {
  position: relative;
  min-width: 0; /* 修复子元素超出父元素问题 */
}
.o_input-wrap-auto-width::after {
  content: attr(date-value) " ";
  visibility: hidden;
  white-space: pre;
  height: 100%;
  line-height: inherit;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  min-width: var(--min-width);
  max-width: var(--max-width);
}
.o_input-wrap-auto-width .o_input-input {
  position: absolute;
  top: 0;
  left: 0;
}