fit-input/lib/input/index.css

输入框

.fit-input {
  font-size: 14px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #333;
  box-sizing: border-box;
  position: relative;
  margin-top: 20px;
  background: white; }

.fit-input .input {
  font-size: 14px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  color: #333;
  box-shadow: none !important; }
  .fit-input .input.center {
    text-align: center; }
  .fit-input .input:focus {
    outline: none; }
  .fit-input .input:disabled {
    border-bottom: 1px dotted #ccc;
    color: #ccc; }
  .fit-input .input:not(:focus)::-webkit-input-placeholder {
    transition: opacify .3s;
    opacity: 0; }
  .fit-input .input:not(:focus):-moz-placeholder {
    /* Firefox 18- */
    transition: opacify .3s;
    opacity: 0; }
  .fit-input .input:not(:focus)::-moz-placeholder {
    /* Firefox 19+ */
    transition: opacify .3s;
    opacity: 0; }
  .fit-input .input:not(:focus):-ms-input-placeholder {
    transition: opacify .3s;
    opacity: 0; }
  .fit-input .input:not(:focus).no-label::-webkit-input-placeholder {
    opacity: 1; }
  .fit-input .input:not(:focus).no-label:-moz-placeholder {
    /* Firefox 18- */
    opacity: 1; }
  .fit-input .input:not(:focus).no-label::-moz-placeholder {
    /* Firefox 19+ */
    opacity: 1; }
  .fit-input .input:not(:focus).no-label:-ms-input-placeholder {
    opacity: 1; }

.fit-input .label {
  color: #999;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all; }
  .fit-input .label.center {
    width: 100%;
    text-align: center; }
  .fit-input .label .label-error {
    color: #f50;
    margin-left: 10px; }
  .fit-input .label.disabled {
    color: #ccc; }
  .fit-input .label.valid-disabled {
    top: -10px;
    font-size: 12px;
    font-weight: bold;
    color: #ccc; }

.fit-input .input:focus ~ .label, .fit-input .input:valid ~ .label {
  top: -10px;
  font-size: 12px;
  font-weight: bold;
  color: #7266ba; }
  .fit-input .input:focus ~ .label.disabled, .fit-input .input:valid ~ .label.disabled {
    color: #ccc; }

.fit-input .input:valid:not(:focus) ~ .label {
  color: #999; }

.fit-input .bottom-bar {
  position: relative;
  display: block;
  width: 100%; }
  .fit-input .bottom-bar:before, .fit-input .bottom-bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0;
    position: absolute;
    background: #7266ba;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all; }
  .fit-input .bottom-bar:before {
    left: 50%; }
  .fit-input .bottom-bar:after {
    right: 50%; }
  .fit-input .bottom-bar.bottom-bar-error:before, .fit-input .bottom-bar.bottom-bar-error:after {
    width: 50%;
    background: #f50; }

.fit-input .input:focus ~ .bottom-bar:before, .fit-input .input:focus ~ .bottom-bar:after {
  width: 50%; }

.fit-input .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5; }

.fit-input .input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease; }

.fit-input .right-addon {
  position: absolute;
  right: 0;
  top: 0;
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

@-webkit-keyframes inputHighlighter {
  from {
    background: #5264AE; }
  to {
    width: 0;
    background: transparent; } }

@keyframes inputHighlighter {
  from {
    background: #5264AE; }
  to {
    width: 0;
    background: transparent; } }