关于input框入焦和失焦，纯css改变样式在工作项目中，是用到input框焦距和失焦时，显示输入的单位。用js方法很简

在工作项目中，是用到input框焦距和失焦时，显示输入的单位。用js方法很简单，但是偶然想到是否可以用纯css来实现？

经过实验是可以实现的。

HMTL:

          <div class="input_money ">
            <em class="hideEm">￥</em>
            <input type="number" class='isInput' placeholder="请输入提现金额" required>
          </div>

CSS：

  .input_money {
    position: relative;
    top: 0;
    left: 0;
    width: 223px;
    height: 34px;
    background-color: #cfa2a2;

    input {
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
      padding: 10px 7px;
      box-sizing: border-box;
      font-size: 14px;
      color: #333;
    }

    em {
      display: none;
      position: absolute;
      top: 0;
      left: 2px;
      font-size: 14px;
      padding: 10px 0;
    }
}

一、焦距时将之前隐藏的单位进行显示

主要是使用 :focus 伪类进行，焦距时样式改变

    input:focus {
      padding-left: calc(1em + 3px);

      &+em {
        display: block;
      }
    }

二、失焦时，判断input中是否有值，如果有值，则将单位显示，如果没有值，则恢复初始状态

主要是使用 input 中的 required 和 :valid 伪类进行验证判断

    input:valid {
      padding-left: calc(1em + 3px);

      &+em {
        display: block;
      }
    }