@opensig/opendesign/lib/_components/in-textarea/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_textarea {
  --padding-v: var(--textarea-padding-v, 8px);
  --padding-h: var(--textarea-padding-h, 16px);
  --min-height: var(--textarea-min-height, 10px);
  --min-width: var(--textarea-min-width, 10px);
  --color: var(--textarea-color, var(--o-color-info1));
  --color-disabled: var(--textarea-color-disabled, var(--o-color-info4));
  --placeholder: var(--textarea-placeholder, var(--o-color-info4));
  --bg-color: var(--textarea-bg-color);
  --icon-size: var(--textarea-icon-size, var(--o-icon_size-xs));
  --icon-color: var(--textarea-icon-color, var(--o-color-info3));
  --icon-color-hover: var(--textarea-icon-color-hover, var(--o-color-info2));
  --icon-color-disabled: var(--textarea-icon-color-disabled, var(--o-color-info4));
  --limit-color: var(--textarea-limit-color, var(--o-color-info4));
  --limit-color-error: var(--textarea-limit-color-error, var(--o-color-danger1));
  --limit-text-size: var(--textarea-limit-text-size, var(--o-font_size-tip2));
  --limit-text-height: var(--textarea-limit-text-height, var(--o-line_height-tip2));
}

.o_textarea {
  color: var(--color);
  max-width: 100%;
  max-height: inherit;
  min-width: inherit;
  min-height: inherit;
  cursor: inherit;
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

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

.o_textarea-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.o_textarea-textarea {
  padding: var(--padding-v) var(--padding-h);
  display: block;
  outline: none;
  border: none;
  color: inherit;
  cursor: inherit;
  background-color: transparent;
  line-height: inherit;
  height: 100%;
  width: 100%;
  font-size: inherit;
  min-width: 100%;
  appearance: none;
  z-index: 1;
}
.o_textarea-textarea::-webkit-input-placeholder {
  color: var(--placeholder, var(--o-color-info4));
}
.o_textarea-textarea:autofill {
  box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
}
.o_textarea-invalid .o_textarea-textarea {
  text-decoration: line-through;
}

.o_textarea-disabled {
  cursor: not-allowed;
}

.o_textarea-readonly {
  cursor: text;
}

.o_textarea-clear {
  right: 2px;
  top: 50%;
  font-size: var(--icon-size);
  margin-top: calc(var(--icon-size) / -2);
  border-radius: 50%;
  visibility: hidden;
  flex-shrink: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  cursor: pointer;
  transform: scale(0.5);
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  z-index: 2;
}
.o_textarea-clear {
  overflow: hidden;
}
.o_textarea-clear svg {
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
  .o_textarea-clear:hover svg {
    transform: rotate(180deg);
  }
}
@media (hover: hover) {
  .o_textarea-clear:hover {
    color: var(--icon-color-hover);
  }
}

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

.o_textarea-limit .o_textarea-textarea {
  padding-bottom: var(--limit-text-height);
  padding-bottom: max(var(--limit-text-height), var(--padding-v));
}

.o_textarea-count {
  right: 7px;
  bottom: 3px;
  color: var(--limit-color);
  font-size: var(--limit-text-size);
  line-height: var(--limit-text-height);
  z-index: 0;
}
.o_textarea-count b {
  font-weight: normal;
}

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

.o_textarea-icon {
  position: absolute;
}

/* auto size */
.o_textarea-auto-size {
  height: auto;
  width: auto;
}

.o_textarea-wrap-auto-size {
  position: relative;
  min-width: 0; /* 修复子元素超出父元素问题 */
  min-height: 0;
  flex: 1;
}
.o_textarea-wrap-auto-size::after {
  content: attr(date-value) " ";
  padding: var(--padding-v) var(--padding-h);
  visibility: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  height: 100%;
  width: 100%;
  line-height: inherit;
  display: block;
  box-sizing: border-box;
  min-height: var(--min-height, 10px);
  min-width: var(--min-width, 10px);
}
.o_textarea-wrap-auto-size .o_textarea-textarea {
  position: absolute;
  top: 0;
  left: 0;
}