如何制作一个精美的输入框？基本表单中的的账号或密码输入框样式

<div class="account">
  <div class="account_title">账号</div>
  <div class="account_box">
    <input type="text" name="" id="account_inp" placeholder="请输入帐号" oninput="btn(this)">
        <img src="./img/下箭头(搜索).png" alt="">
  </div>
  <div class="account_text">收款账户不能为空</div>
</div>

.account {
        width: 300px;
        height: 90px;
        border-radius: 5px;
        padding-right:10px;
        margin: 50px;
      }
      .account_box {
        width: 390;
        height: 30px;
        border: 1px solid #DCDFE6;
        border-radius: 5px;
        padding: 0 10px;
        margin-top: 10px;
        display: flex;
        align-items: center;
      }
      .account_box>input {
        height: 90%;
        width: 254px;
        border: none;
        outline: none;
      }
      .account_box>img {
        width: 16px;
        height: 16px;
        transition: 0.2s;
      }
      .account_title{
        height: 18px;
        font-size: 14px;
      }
      .account_text{
        font-size: 14px;
        color: red;
      }

// 触发input事件后获取输入框中的值
      function btn(text){
        // 判断是否为空,如果为空让红字显示，
        if($(text).val() == ""){
          // jqery自带的动画,非常好用
          $(".account_text").slideDown(200)
        }else{
          $(".account_text").slideUp(200)
        }
      }