element-plus/theme-chalk/el-input-tag.css

A Component Library for Vue 3

.el-input-tag{--el-input-tag-border-color-hover:var(--el-border-color-hover);--el-input-tag-placeholder-color:var(--el-text-color-placeholder);--el-input-tag-disabled-color:var(--el-disabled-text-color);--el-input-tag-disabled-border:var(--el-disabled-border-color);--el-input-tag-font-size:var(--el-font-size-base);--el-input-tag-close-hover-color:var(--el-text-color-secondary);--el-input-tag-text-color:var(--el-text-color-regular);--el-input-tag-input-focus-border-color:var(--el-color-primary);--el-input-tag-width:100%;--el-input-tag-mini-height:var(--el-component-size);--el-input-tag-gap:6px;--el-input-tag-padding:4px;--el-input-tag-inner-padding:8px;--el-input-tag-line-height:24px;align-items:center;background-color:var(--el-fill-color-blank);border-radius:var(--el-border-radius-base);box-shadow:0 0 0 1px var(--el-border-color) inset;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--el-input-tag-font-size);line-height:var(--el-input-tag-line-height);min-height:var(--el-input-tag-mini-height);padding:var(--el-input-tag-padding);transform:translateZ(0);transition:var(--el-transition-duration);width:var(--el-input-tag-width)}.el-input-tag.is-focused{box-shadow:0 0 0 1px var(--el-color-primary) inset}.el-input-tag.is-hovering:not(.is-focused){box-shadow:0 0 0 1px var(--el-border-color-hover) inset}.el-input-tag.is-disabled{background-color:var(--el-fill-color-light);cursor:not-allowed}.el-input-tag.is-disabled,.el-input-tag.is-disabled:hover{box-shadow:0 0 0 1px var(--el-input-tag-disabled-border) inset}.el-input-tag.is-disabled.is-focus{box-shadow:0 0 0 1px var(--el-input-focus-border-color) inset}.el-input-tag.is-disabled .el-input-tag__inner .el-input-tag__input,.el-input-tag.is-disabled .el-input-tag__inner .el-tag{cursor:not-allowed}.el-input-tag__prefix,.el-input-tag__suffix{align-items:center;color:var(--el-input-icon-color,var(--el-text-color-placeholder));display:flex;flex-shrink:0;padding:0 var(--el-input-tag-inner-padding)}.el-input-tag__suffix{gap:8px}.el-input-tag__inner{align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:var(--el-input-tag-gap);max-width:100%;min-width:0;position:relative}.el-input-tag__inner.is-left-space{margin-left:var(--el-input-tag-inner-padding)}.el-input-tag__inner.is-right-space{margin-right:var(--el-input-tag-inner-padding)}.el-input-tag__inner.is-draggable .el-tag{cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.el-input-tag__drop-indicator{background-color:var(--el-color-primary);height:var(--el-input-tag-line-height);position:absolute;top:0;width:1px}.el-input-tag__inner .el-tag{border-color:transparent;cursor:pointer;max-width:100%}.el-input-tag__inner .el-tag.el-tag--plain{border-color:var(--el-tag-border-color)}.el-input-tag__inner .el-tag .el-tag__content{line-height:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-input-tag__input-wrapper{flex:1}.el-input-tag__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--el-input-tag-text-color);font-family:inherit;font-size:inherit;line-height:inherit;outline:none;padding:0;width:100%}.el-input-tag__input::-moz-placeholder{color:var(--el-input-tag-placeholder-color)}.el-input-tag__input::placeholder{color:var(--el-input-tag-placeholder-color)}.el-input-tag__input-calculator{left:0;max-width:100%;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:pre}.el-input-tag--large{--el-input-tag-gap:6px;--el-input-tag-padding:8px;--el-input-tag-padding-left:8px;--el-input-tag-font-size:14px}.el-input-tag--small{--el-input-tag-gap:4px;--el-input-tag-padding:2px;--el-input-tag-padding-left:6px;--el-input-tag-font-size:12px;--el-input-tag-line-height:20px;--el-input-tag-mini-height:var(--el-component-size-small)}