.input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    box-sizing: border-box;
    font-family: Microsoft Yahei,Helvetica Neue,\\5B8B\4F53,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.input *,
    .input *::after,
    .input *::before {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    -webkit-touch-callout: none;
}
.inputElement {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: none;
    background-color: transparent;
    color: rgb(33, 33, 33);
    box-sizing: border-box;
    font-size: inherit;
    padding: 0 8px;
    line-height: inherit;
    border: 0;
    outline: none;
    width: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1
}
.inputElement:focus:not([disabled]):not([readonly]) {}
.inputElement:focus:not([disabled]):not([readonly]) ~ .bar::before,
        .inputElement:focus:not([disabled]):not([readonly]) ~ .bar::after {
    width: 50%;
}
.icon {
    font-size: 18px;
}
.bar {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%
}
.bar::before,
  .bar::after {
    background-color: rgb(0, 188, 212);
    bottom: 0;
    content: '';
    height: 2px;
    position: absolute;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    width: 0;
}
.bar::before {
    left: 50%;
}
.bar::after {
    right: 50%;
}
.normal {
    line-height: 28px;
}
.normal .prefix, .normal .suffix {
    width: 28px;
    height: 28px;
    line-height: 28px;
}
.small {
    line-height: 22px;
}
.small .prefix, .small .suffix {
    width: 24px;
    height: 24px;
    line-height: 24px;
}
.large {
    line-height: 32px;
}
.large .prefix, .large .suffix {
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.prefix, .suffix {
    color: rgb(33, 33, 33);
    -webkit-transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer
}
.prefix.search:hover, .suffix.search:hover {
    color: rgb(0, 188, 212);
}
.prefix.close-circle, .suffix.close-circle {
    color: rgba(0, 0, 0, 0.12);
}
.prefix.close-circle:hover, .suffix.close-circle:hover {
    color: rgb(158, 158, 158);
}
.textarea {
    display: block;
    width: 100%;
    resize: vertical;
    padding: 5px 7px;
    line-height: 28px;

    box-sizing: border-box;

    font-family: Microsoft Yahei,Helvetica Neue,\\5B8B\4F53,Helvetica,Arial,sans-serif;

    -webkit-font-smoothing: antialiased;

    font-smoothing: antialiased;

    -webkit-text-size-adjust: 100%;

        -ms-text-size-adjust: 100%;

            text-size-adjust: 100%;

    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: rgb(33, 33, 33);
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    -webkit-transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1)
}
.textarea *,
    .textarea *::after,
    .textarea *::before {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    -webkit-touch-callout: none;
}
.textarea:focus:not([disabled]):not([readonly]),
    .textarea:hover:not([disabled]):not([readonly]) {
    outline: none;
    border-color: rgb(0, 188, 212);
}