输入框的高逼格

一、html

 <form>
   <input type="text" required v-model="form.plateNo"/>
   <label>
     <span>车牌号</span>
   </label>
 </form>

样式

form CSS

form {
      height: 58px;
      line-height: 58px;
      margin: auto;
      position: relative;
      font-family: Sans-serif;
      overflow: hidden; 
   }

label&span CSS

form{
      height: 58px;
      line-height: 58px;
      margin: auto;
      position: relative;
      font-family: Sans-serif;
      // overflow: hidden; 
      & input:focus {
        border-radius: 4px;
        border: 2px solid #3C72E7; 
      }form
      & input:focus + label span,
      & input:valid + label span {
        transform: translateY(-20px); 
        font-size: 12px; 
        color:#3C72E7 ;
        left: 5px;
      }
    //   & input:focus + label::after,
    //   & input:valid + label::after {
    //     transform: translateX(0); 
    // }
      input{
        height: 38px;
        width: 180px;
        border: 1px solid #ccc;;
        outline: none; 
        border-radius: 4px;
      };
      label {
        // position: absolute;
        // top: 0;
        // left: 0;
        pointer-events: none;
        // &::after{
        //   content: ""; 
        //   height: 48px;
        //   width: 176px;
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   border-bottom: 2px solid #3C72E7; 
        //   transform: translateX(-100%); 
        //   transition: all 0.3s ease; 
        // };
        span {
          color: #ccc;
          background: #fff;
          position: absolute;
          bottom: 22px;
          width: 44px;
          text-align: center;
          font-size: 14px; 
          line-height: 14px;
          left: 15px;
          transition: all 0.3s ease; 
        }
      }
    }