自定义输入框focus效果实现

    input{
        border: none;
        outline: none;
        background: linear-gradient(to bottom, transparent 95%, red 95%) no-repeat;
        height: 30px;
        background-size: 0 100%;
        transition: background-size ease-in-out 0.5s;
    }
    input:focus{
        background-size: 100% 100%;
    }
    .myInput{
        background: linear-gradient(to bottom, transparent 95%, #ccc 95%) no-repeat;
        width: fit-content;
    }




     <div class="myInput">
       <input/>
     </div>